/* --- HERO SECTION --- */
.help-hero {
    height: 40vh;
    background: linear-gradient(rgba(0,0,0,0.7), #0f0f0f), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80');
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 0 20px;
}

.help-hero h1 {
    font-family: var(--font-serif); font-size: 3rem; margin-bottom: 30px;
    color: #fff;
}

.help-search-wrapper {
    width: 100%; max-width: 600px; position: relative;
}
.help-search-wrapper input {
    width: 100%; padding: 20px; border-radius: 50px;
    background: rgba(30, 30, 30, 0.9); border: 1px solid var(--border-strong);
    color: #fff; font-size: 1rem; text-align: center;
    transition: var(--transition); outline: none;
}
.help-search-wrapper input:focus {
    border-color: var(--accent-gold); box-shadow: 0 0 20px var(--accent-gold-glow);
}

/* Light-mode hero: cream scrim, dark heading, theme-matched search input. */
[data-theme="light"] .help-hero {
    background:
        linear-gradient(rgba(250, 248, 242, 0.55), var(--bg)),
        url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80');
    background-size: cover; background-position: center;
}
[data-theme="light"] .help-hero h1 { color: var(--text-strong); }
[data-theme="light"] .help-search-wrapper input {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--border);
    color: var(--text);
}

/* --- FAQ CONTAINER --- */
.help-container { max-width: 800px; padding: 60px 20px; }

.category-title {
    color: var(--accent-gold); font-family: var(--font-serif);
    margin: 40px 0 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px;
}

/* --- ACCORDION --- */
.accordion-item {
    border: 1px solid var(--border-muted); background: var(--surface); margin-bottom: 15px;
    border-radius: 4px; overflow: hidden; transition: border-color 0.3s;
}
.accordion-item:hover { border-color: var(--border-strong); }

.accordion-header {
    width: 100%; padding: 20px 25px;
    background: transparent; border: none;
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text); font-size: 1.1rem; cursor: pointer; text-align: left;
    font-family: var(--font-sans);
}
.accordion-header span { pointer-events: none; }
.accordion-header .icon {
    color: var(--accent-gold); font-size: 1.5rem; font-weight: 300; transition: transform 0.3s;
}

.accordion-body {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    background: var(--surface-sunken); color: var(--text-muted); line-height: 1.6;
}
.accordion-body p { padding: 25px; border-top: 1px solid var(--border-muted); }

/* Active State */
.accordion-item.active { border-color: var(--accent-gold); }
.accordion-item.active .accordion-header .icon { transform: rotate(45deg); }
.accordion-item.active .accordion-body { max-height: 200px; }

/* --- CONTACT BOX --- */
.contact-box {
    text-align: center; background: var(--surface-alt); padding: 40px;
    margin-top: 60px; border: 1px solid var(--border);
}
.contact-box h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 10px; }
.contact-box p { color: var(--text-subtle); margin-bottom: 25px; }