/* ============================================================
   Aethermoor - Support Page Styles
   ============================================================ */

/* Support Home */
.support-search { display: flex; gap: 0.75rem; max-width: 600px; margin: 0 auto 3rem; }
.support-search .input { flex: 1; }

.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.support-card { background: var(--dark-lighter); border: 1px solid var(--primary); border-radius: 12px; padding: 2rem; text-align: center; text-decoration: none; transition: all 0.3s; }
.support-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.support-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.support-card h3 { color: var(--gold); margin-bottom: 0.5rem; }
.support-card p { color: var(--text-dim); font-size: 0.9rem; }

/* Ticket Form */
.ticket-form { max-width: 800px; margin: 0 auto; }
.ticket-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Ticket View */
.ticket-status { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-dim); }
.status-badge { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.status-badge.open { background: var(--info); color: #fff; }
.status-badge.investigating { background: var(--warning); color: var(--dark); }
.status-badge.confirmed { background: var(--error); color: #fff; }
.status-badge.fixed { background: var(--success); color: var(--dark); }

.ticket-timeline { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.timeline-item { display: flex; gap: 1rem; }
.timeline-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--dark-lightest); border: 2px solid var(--primary); flex-shrink: 0; }
.timeline-avatar.admin { border-color: var(--gold); }
.timeline-content { background: var(--dark-lighter); border: 1px solid var(--primary); border-radius: 12px; padding: 1rem; flex: 1; }
.timeline-content strong { color: var(--text); }
.timeline-content.admin strong { color: var(--gold); }
.timeline-date { display: block; color: var(--text-dim); font-size: 0.75rem; margin-bottom: 0.5rem; }
.timeline-content p { color: var(--text); line-height: 1.6; }

.ticket-reply { background: var(--dark-lighter); border: 1px solid var(--primary); border-radius: 12px; padding: 1.5rem; }
.ticket-reply h3 { color: var(--gold); margin-bottom: 1rem; }

/* FAQ */
.faq-search { max-width: 400px; margin: 0 auto 2rem; }
.faq-categories { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
.faq-category h2 { color: var(--gold); font-family: Georgia, serif; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--primary); }
.faq-item { border: 1px solid var(--primary); border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden; }
.faq-question { width: 100%; padding: 1rem; background: var(--dark-lighter); border: none; color: var(--text); text-align: left; cursor: pointer; font-size: 0.95rem; transition: background 0.2s; }
.faq-question:hover { background: var(--dark-lightest); }
.faq-answer { padding: 1rem; color: var(--text-dim); line-height: 1.6; display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-question { color: var(--gold); }

/* Guides */
.guide-categories { display: flex; flex-direction: column; gap: 2rem; }
.guide-category h2 { color: var(--gold); font-family: Georgia, serif; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--primary); }
.guide-card { background: var(--dark-lighter); border: 1px solid var(--primary); border-radius: 8px; padding: 1rem; margin-bottom: 0.5rem; transition: all 0.2s; }
.guide-card:hover { border-color: var(--gold); }
.guide-card a { text-decoration: none; }
.guide-card h3 { color: var(--text); margin-bottom: 0.35rem; }
.guide-card:hover h3 { color: var(--gold); }
.guide-card p { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.35rem; }
.guide-meta { color: var(--text-dim); font-size: 0.75rem; }

/* Known Issues */
.known-issues-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.issue-card { background: var(--dark-lighter); border: 1px solid var(--primary); border-radius: 12px; padding: 1.5rem; }
.issue-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.issue-header h3 { color: var(--text); font-size: 1rem; }
.issue-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }

/* Key Bindings */
.kb-toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.kb-table-container { overflow-x: auto; }
.kb-table kbd { background: var(--dark-lightest); border: 1px solid var(--primary); border-radius: 4px; padding: 0.15rem 0.4rem; font-family: Consolas, monospace; font-size: 0.8rem; color: var(--gold); }

/* Responsive */
@media (max-width: 768px) {
    .ticket-form .form-row { grid-template-columns: 1fr; }
    .support-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .support-grid { grid-template-columns: 1fr; }
}