/* --- Global Resonance (Variables and Root) --- */
:root {
    --color-dark-void: #0a0b0f;
    --color-near-black: #1a1b20;
    --color-light-text: #e0e0e0;
    --color-dim-text: #a0a0a0;
    --color-accent: #89b4f8;

    --font-primary: 'Crimson Text', serif;
    --font-secondary: 'Metrophobic', sans-serif;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-primary);
    background-color: var(--color-dark-void);
    color: var(--color-light-text);
    line-height: 1.7;
    font-size: 18px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 20px 0; }

/* Header */
header {
    background: rgba(10, 11, 15, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #2a2b30;
    position: sticky; top: 0; width: 100%; z-index: 100;
}
header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo { font-family: var(--font-secondary); font-size: 1.5rem; font-weight: 600; color: var(--color-accent); }
nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
nav ul li { margin: 5px 15px; }
nav ul li a { text-decoration: none; color: var(--color-light-text); font-family: var(--font-secondary); font-size: 1rem; transition: color .3s; }
nav ul li a:hover { color: var(--color-accent); }

/* Animations */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes subtlePulse { 0%{transform:scale(1);box-shadow:0 0 5px rgba(137,180,248,.2)} 50%{transform:scale(1.02);box-shadow:0 0 15px rgba(137,180,248,.4)} 100%{transform:scale(1);box-shadow:0 0 5px rgba(137,180,248,.2)} }

/* Hero */
.hero {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 100px 20px;
    background: linear-gradient(180deg, var(--color-dark-void) 0%, #111217 100%);
    overflow: hidden;
}
.hero h1 { font-family: var(--font-secondary); font-size: 3.5rem; color: #fff; margin-bottom: 20px; opacity: 0; animation: fadeInUp 1s ease .5s forwards; }
.hero .subtitle { font-size: 1.5rem; color: var(--color-dim-text); margin-bottom: 40px; font-style: italic; opacity: 0; animation: fadeInUp 1s ease 1s forwards; }
.cta-button {
    display: inline-block; background-color: var(--color-accent); color: var(--color-dark-void);
    font-family: var(--font-secondary); text-decoration: none; padding: 15px 30px; border-radius: 5px;
    font-size: 1rem; font-weight: 600; transition: background-color .3s, transform .3s; border: none; cursor: pointer;
}
.hero .cta-button { opacity: 0; animation: fadeInUp 1s ease 1.5s forwards, subtlePulse 2.5s ease-in-out 3s infinite; }
.cta-button:hover { background:#fff; transform: translateY(-2px) scale(1.03); animation-play-state: paused; }

/* Content */
.content-section { padding: 80px 20px; }
.content-section h2 { font-family: var(--font-secondary); font-size: 2.5rem; color: var(--color-accent); text-align: center; margin-bottom: 50px; }
.content-section p { max-width: 800px; margin: 0 auto 20px auto; text-align: center; }

.dark-section { background: var(--color-near-black); border-top: 1px solid #2a2b30; border-bottom: 1px solid #2a2b30; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 30px; }
.card { background: var(--color-near-black); border: 1px solid #2a2b30; padding: 30px; border-radius: 8px; transition: transform .3s, border-color .3s; }
.card:hover { transform: translateY(-5px); border-color: var(--color-accent); }
.card h3 { font-family: var(--font-secondary); font-size: 1.5rem; color: var(--color-accent); margin-bottom: 15px; }
.card p { text-align: left; color: var(--color-dim-text); }

/* Ask form */
#question-form { max-width: 800px; margin: 30px auto 0; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-family: var(--font-secondary); color: var(--color-accent); margin-bottom: 10px; text-align: left; }
.form-group input[type="text"] {
    width: 100%; padding: 15px; font-size: 1rem; font-family: var(--font-primary);
    background: var(--color-dark-void); border: 1px solid #2a2b30; border-radius: 5px; color: var(--color-light-text); transition: border-color .3s;
}
.form-group input[type="text"]:focus { outline: none; border-color: var(--color-accent); }
.form-hint { margin-top: 6px; color: var(--color-dim-text); text-align: right; font-size: .9rem; }
#question-submit:disabled { background: var(--color-dim-text); cursor: wait; transform: none; animation: none; }

/* Answer box */
#answer-container {
    max-width: 800px; margin: 40px auto 0; padding: 30px; background: var(--color-dark-void);
    border: 1px solid #2a2b30; border-radius: 8px; display: none; text-align: left;
    opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s;
}
#answer-container.visible { display: block; opacity: 1; transform: translateY(0); }
#answer-container .q-text { color: #89b4f8; font-size: 1.2rem; font-weight: 600; }
#answer-container .a-text { color: var(--color-light-text); line-height: 1.7; white-space: pre-wrap; }

/* Badges for category/cached */
.badge { display:inline-block; padding:2px 8px; border:1px solid #2a2b30; border-radius:12px; font-size:.85rem; margin-left:6px; color:var(--color-accent); }
.badge.muted { color: var(--color-dim-text); border-color:#3a3b40; }

/* Footer */
footer { text-align: center; padding: 40px 20px; border-top: 1px solid #2a2b30; color: var(--color-dim-text); font-size: .9rem; }
footer p { margin-bottom: 5px; }

/* Fade-in */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .8s, transform .8s; }
.fade-in.visible { opacity: 1; transform: none; }
.no-js .fade-in { opacity: 1 !important; transform: none !important; }

/* Anchor offset for sticky header */
[id]{ scroll-margin-top: 80px; }

/* Policy page bits */
.policy-container p, .policy-container ul { text-align: left; max-width: 800px; margin-bottom: 25px; }
.policy-container .policy-intro { text-align: center; font-style: italic; color: var(--color-dim-text); margin-bottom: 40px; }
.policy-container h3 { font-family: var(--font-secondary); font-size: 1.8rem; color: var(--color-accent); margin-top: 40px; margin-bottom: 20px; text-align: left; max-width: 800px; margin-left: auto; margin-right: auto; }
.policy-container ul { list-style-position: inside; padding-left: 10px; }

/* FAQ in answer container */
#answer-container h3.faq-question { font-family: var(--font-secondary); font-size: 1.5rem; color: var(--color-accent); margin-bottom: 15px; text-align: left; line-height: 1.4; }
#answer-container div.faq-answer { text-align: left; color: var(--color-light-text); }
#answer-container div.faq-answer p { margin-bottom: 20px; }
#answer-container p:last-child { margin-bottom: 0; }
#answer-container p em { color: var(--color-dim-text); font-size: .9rem; font-style: italic; }

/* Honeypot */
.honeypot { display: none !important; }

/* Recent list UI */
#recent-controls{max-width:1100px;margin:0 auto 16px auto}
.recent-filter-label{color:var(--color-dim-text)}
.recent-cats a{display:inline-block;margin:4px 8px 0 0;padding:6px 10px;border:1px solid #2a2b30;border-radius:999px;text-decoration:none;color:var(--color-light-text);font-size:.92rem}
.recent-cats a.active, .recent-cats a:hover{border-color:var(--color-accent);color:var(--color-accent)}
#recent-search{flex:1;min-width:240px;padding:10px;border-radius:6px;border:1px solid #2a2b30;background:#0a0b0f;color:var(--color-light-text)}
.recent-list{list-style:none;margin:8px 0 0 0;padding:0}
.recent-list li{border:1px solid #2a2b30;background:var(--color-near-black);border-radius:8px;padding:0;margin:10px 0}
.recent-toggle{width:100%;text-align:left;background:transparent;border:0;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.recent-q{font-family:var(--font-secondary);color:var(--color-accent);font-size:1.05rem;margin:0}
.recent-meta{color:var(--color-dim-text);font-size:.9rem}
.recent-meta a{color:var(--color-accent);text-decoration:none}
.recent-answer{padding:0 14px 14px 14px}
.recent-pagination{display:flex;gap:8px;justify-content:center;margin-top:14px}
.recent-pagination button{padding:8px 12px;border-radius:8px;border:1px solid #2a2b30;background:#0a0b0f;color:var(--color-light-text);cursor:pointer}
.recent-pagination button[disabled]{opacity:.5;cursor:not-allowed}

@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
  .hero .subtitle { font-size: 1.2rem; }
  header .container { flex-direction: column; }
}

.qa {
  position: relative;
  background: var(--color-near-black);
  border: 1px solid #2a2b30;
  border-radius: 8px;
  padding: 25px;
  margin-top: 15px;
}

.qa-category {
  position: absolute;
  top: 12px;
  right: 18px;
  background: var(--color-accent);
  color: var(--color-dark-void);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
}

.q-line, .a-line { margin-bottom: 20px; }
.q-line strong, .a-line strong { color: var(--color-accent); margin-right: 6px; }
.q-text { color: #89b4f8; font-size: 1.1rem; font-weight: 600; }
.a-text { white-space: pre-wrap; line-height: 1.7; }

/* === Recent Filter Bar === */
#recent-controls {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}

.recent-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.recent-filter-label {
  color: var(--color-dim-text);
  font-size: 0.95rem;
  font-weight: 500;
}

.recent-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.recent-reset {
  background: var(--color-dark-void);
  border: 1px solid #2a2b30;
  border-radius: 6px;
  color: var(--color-dim-text);
  font-size: 0.85rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.recent-reset:hover {
  background: var(--color-accent);
  color: var(--color-dark-void);
}

/* === Search alignment === */
.recent-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 240px;
  gap: 6px;
}

#recent-search {
  flex: 1;
  min-width: 200px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #2a2b30;
  background: #0a0b0f;
  color: var(--color-light-text);
}

.recent-search-btn {
  background: var(--color-accent);
  color: var(--color-dark-void);
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.recent-search-btn:hover {
  background: #fff;
  transform: scale(1.05);
}