/* =========================================================
   AquaBlue — Help Center page template
   ========================================================= */

.ab-help-main { padding-bottom: 2rem; }

/* ---------- Hero ---------- */
.ab-help-hero { padding: 3.5rem 0 2.5rem; text-align: center; }
.ab-help-title {
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--ab-deep);
	margin-top: 0.5rem;
}
[data-theme="dark"] .ab-help-title { color: var(--ab-white); }
.ab-help-subtitle {
	max-width: 560px;
	margin: 0 auto 2rem;
	font-size: 1.05rem;
}

.ab-help-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 560px;
	margin: 0 auto;
	padding: 0.9rem 1.4rem;
}
.ab-help-search-icon { flex-shrink: 0; color: var(--ab-text-muted); }
.ab-help-search input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--ab-font-body);
	font-size: 1rem;
	color: var(--ab-text);
	outline: none;
}
.ab-help-search input::placeholder { color: var(--ab-text-muted); }

/* ---------- Category grid ---------- */
.ab-help-categories { padding: 1rem 0 3rem; }
.ab-help-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}
.ab-help-cat-card {
	display: block;
	padding: 1.6rem;
	text-align: left;
	color: var(--ab-text);
}
.ab-help-cat-card:hover { transform: translateY(-4px); color: var(--ab-text); }
.ab-help-cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ab-radius-sm);
	background: rgba(0, 174, 239, 0.12);
	color: var(--ab-primary);
	margin-bottom: 1rem;
}
.ab-help-cat-icon .ab-icon { width: 24px; height: 24px; }
.ab-help-cat-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.ab-help-cat-card p { font-size: 0.9rem; margin: 0; }

/* ---------- FAQ sections ---------- */
.ab-help-faq-section { padding: 2.5rem 0; scroll-margin-top: 5.5rem; }
.ab-help-section-heading {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.ab-help-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 174, 239, 0.12);
	color: var(--ab-primary);
	flex-shrink: 0;
}
.ab-help-section-heading h2 { font-size: 1.4rem; margin: 0; }

.ab-help-faq-list { display: flex; flex-direction: column; gap: 0.9rem; }

.ab-help-faq-item { padding: 0; overflow: hidden; }
.ab-help-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	padding: 1.1rem 1.4rem;
	font-family: var(--ab-font-display);
	font-weight: 600;
	font-size: 0.98rem;
}
.ab-help-faq-item summary::-webkit-details-marker { display: none; }
.ab-help-faq-item summary::marker { content: ""; }

.ab-help-faq-toggle {
	position: relative;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(0, 174, 239, 0.14);
}
.ab-help-faq-toggle::before,
.ab-help-faq-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ab-primary-dark);
	transition: transform var(--ab-transition);
}
.ab-help-faq-toggle::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.ab-help-faq-toggle::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.ab-help-faq-item[open] .ab-help-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.ab-help-faq-item[open] .ab-help-faq-toggle::before { transform: translate(-50%, -50%) rotate(180deg); }

.ab-help-faq-answer {
	padding: 0 1.4rem 1.3rem;
	font-size: 0.94rem;
	color: var(--ab-text-muted);
}
.ab-help-faq-answer p:last-child { margin-bottom: 0; }
.ab-help-faq-answer ol,
.ab-help-faq-answer ul { margin: 0.5rem 0 1em; padding-left: 1.25rem; }
.ab-help-faq-answer li { margin-bottom: 0.4rem; }
.ab-help-faq-answer strong { color: var(--ab-text); }
.ab-help-faq-answer a { text-decoration: underline; }

/* ---------- No results ---------- */
.ab-help-no-results {
	text-align: center;
	color: var(--ab-text-muted);
	padding: 2rem 0;
}

/* ---------- Contact CTA ---------- */
.ab-help-contact { padding: 2.5rem 0 4rem; }
.ab-help-contact-card {
	padding: 2.75rem 2rem;
	text-align: center;
	background: linear-gradient(135deg, rgba(0,174,239,0.14), rgba(0,60,100,0.08));
}
.ab-help-contact-card h2 { margin-bottom: 0.5rem; }
.ab-help-contact-card p { max-width: 460px; margin: 0 auto 1.75rem; }
.ab-help-contact-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.ab-help-contact-actions .ab-btn .ab-icon { width: 18px; height: 18px; }

@media (max-width: 640px) {
	.ab-help-contact-card { padding: 2rem 1.25rem; }
	.ab-help-search { padding: 0.75rem 1.1rem; }
}