/**
 * FAQs Page
 *
 * Two-column browse layout with left category sidebar and right accordion.
 * Includes "Still have a question?" CTA bar at the bottom.
 *
 * Figma source: UCDnXDulIVO8cyPbnrvJb5, node 1498:7
 * Colour palette: teal (#2aadb5), dark-teal (#0e5f65), pink (#d4799a),
 *                 ink (#2e404f), slate (#5a6f80), surface (#f5f9fa),
 *                 border (#e1e8ed).
 * BEM namespace: .azuri-faq
 *
 * @package Azuri_Group
 */

/* ==========================================================================
   1. SECTION WRAPPER
   ========================================================================== */

.azuri-faq {
	background-color: var(--azuri-color-white, #fff);
	padding-top:      80px;
	padding-bottom:   80px;
}

/* ==========================================================================
   2. TWO-COLUMN LAYOUT
   ========================================================================== */

.azuri-faq__layout {
	align-items: flex-start;
	display:     flex;
	gap:         60px;
}

/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

.azuri-faq__sidebar {
	display:    flex;
	flex-direction: column;
	gap:        22px;
	flex-shrink: 0;
	width:      300px;
}

/* Eyebrow */
.azuri-faq__eyebrow {
	color:          var(--azuri-color-teal, #2aadb5);
	font-family:    var(--azuri-font-family-base);
	font-size:      11px;
	font-weight:    var(--azuri-font-weight-semibold, 600);
	letter-spacing: 2.5px;
	line-height:    1;
	margin:         0;
	text-transform: uppercase;
}

/* Heading */
.azuri-faq__heading {
	display:     flex;
	flex-direction: column;
	font-family: var(--azuri-font-family-base);
	font-size:   36px;
	font-style:  normal;
	font-weight: 300;
	line-height: 1.1;
	margin:      0;
}

.azuri-faq__heading-plain {
	color:       var(--azuri-color-ink, #2e404f);
	font-weight: 300;
}

.azuri-faq__heading-italic {
	color:       var(--azuri-color-teal-700, #0e5f65);
	font-style:  italic;
	font-weight: 300;
}

/* Description */
.azuri-faq__desc {
	color:       var(--azuri-color-slate, #5a6f80);
	font-family: var(--azuri-font-family-base);
	font-size:   14px;
	font-weight: var(--azuri-font-weight-regular, 400);
	line-height: 22px;
	margin:      0;
	max-width:   280px;
}

/* ── Category nav ── */
.azuri-faq__cat-nav {
	width: 100%;
}

.azuri-faq__cat-list {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	list-style:     none;
	margin:         0;
	padding:        0;
}

.azuri-faq__cat-item {
	align-items:      center;
	background:       transparent;
	border:           none;
	border-radius:    10px;
	cursor:           pointer;
	display:          flex;
	font-family:      var(--azuri-font-family-base);
	justify-content:  space-between;
	padding:          12px 14px;
	text-align:       left;
	transition:       background-color 0.15s ease;
	width:            100%;
}

.azuri-faq__cat-item:hover,
.azuri-faq__cat-item:focus{
	background-color: rgba(42, 173, 181, 0.06) !important;
}

.azuri-faq__cat-item--active {
	background-color: rgba(42, 173, 181, 0.10) !important;
}

.azuri-faq__cat-name {
	color:       var(--azuri-color-ink, #2e404f);
	font-size:   14px;
	font-weight: var(--azuri-font-weight-regular, 400);
	line-height: 1;
}

.azuri-faq__cat-item--active .azuri-faq__cat-name {
	color:       var(--azuri-color-teal-700, #0e5f65);
	font-weight: var(--azuri-font-weight-medium, 500);
}

.azuri-faq__cat-count {
	color:       var(--azuri-color-slate, #5a6f80);
	font-size:   12px;
	font-weight: var(--azuri-font-weight-regular, 400);
	flex-shrink: 0;
}

/* ==========================================================================
   4. ACCORDION
   ========================================================================== */

.azuri-faq__accordion {
	display:        flex;
	flex:           1 0 0;
	flex-direction: column;
	gap:            14px;
	min-width:      0;
}

/* ── Item card ── */
.azuri-faq__item {
	background:    var(--azuri-color-white, #fff);
	border:        1px solid #e1e8ed;
	border-radius: 14px;
	padding:       22px 28px;
	transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

.azuri-faq__item--open {
	border-color: rgba(42, 173, 181, 0.30);
	box-shadow:   0 6px 18px rgba(15, 26, 46, 0.06);
}

/* Hidden items (filtered out by JS) */
.azuri-faq__item[hidden] {
	display: none;
}

/* ── Header button ── */
.azuri-faq__header {
	align-items:     center;
	background:      none;
	border:          none;
	cursor:          pointer;
	display:         flex;
	justify-content: space-between;
	padding:         0;
	text-align:      left;
	width:           100%;   
    background-color: transparent !important;
}
.azuri-faq__answer p strong {
    font-weight: 600;
    color: #2E404F;
}
.azuri-faq__header-left {
	align-items: center;
	display:     flex;
	flex:        1;
	gap:         14px;
	min-width:   0;
	padding-right: 16px;
}

/* ── Category badge ── */
.azuri-faq__badge {
	border-radius:  var(--azuri-radius-pill, 999px);
	flex-shrink:    0;
	font-family:    var(--azuri-font-family-base);
	font-size:      9px;
	font-weight:    var(--azuri-font-weight-semibold, 600);
	letter-spacing: 1.2px;
	line-height:    1;
	padding:        5px 10px;
	text-transform: uppercase;
	white-space:    nowrap;
}

.azuri-faq__badge--teal {
	background-color: rgba(42, 173, 181, 0.12);
	color:            var(--azuri-color-teal, #2aadb5);
}

.azuri-faq__badge--dark-teal {
	background-color: rgba(14, 95, 101, 0.12);
	color:            var(--azuri-color-teal-700, #0e5f65);
}

.azuri-faq__badge--pink {
	background-color: rgba(42, 173, 181, 0.12);
	color:            var(--azuri-color-teal, #2aadb5);
}

/* ── Question text ── */
.azuri-faq__question {
	color:       var(--azuri-color-ink, #2e404f);
	font-family: var(--azuri-font-family-base);
	font-size:   17px;
	font-weight: var(--azuri-font-weight-medium, 500);
	line-height: 1.35;
	margin:      0;
}

/* ── Toggle button ── */
.azuri-faq__toggle {
	align-items:     center;
	border-radius:   var(--azuri-radius-pill, 999px);
	display:         flex;
	flex-shrink:     0;
	font-size:       16px;
	font-weight:     var(--azuri-font-weight-medium, 500);
	height:          38px;
	justify-content: center;
	line-height:     1;
	min-width:       38px;
	transition:      background-color 0.15s ease, color 0.15s ease;
	user-select:     none;
	width:           38px;
}

.azuri-faq__toggle--closed {
	background-color: #f5f9fa;
	color:            var(--azuri-color-slate, #5a6f80);
}

.azuri-faq__toggle--open {
	background-color: var(--azuri-color-teal, #2aadb5);
	color:            var(--azuri-color-white, #fff);
}

/* Focus styles — WCAG 2.1 AA */
.azuri-faq__header:focus-visible {
	outline:        2px solid var(--azuri-color-teal, #2aadb5);
	outline-offset: 2px;
	border-radius:  4px;
}

/* ── Divider ── */
.azuri-faq__divider {
	background-color: #e1e8ed;
	border:           none;
	height:           1px;
	margin:           16px 0 0;
}

/* ── Answer ── */
.azuri-faq__answer {
	color:       var(--azuri-color-slate, #5a6f80);
	font-family: var(--azuri-font-family-base);
	font-size:   15px;
	font-weight: var(--azuri-font-weight-regular, 400);
	line-height: 26px;
	margin-top:  16px;
}

.azuri-faq__answer p {
	margin-bottom: 16px;
}

.azuri-faq__answer p:last-child {
	margin-bottom: 0;
}

.azuri-faq__answer ul {
	margin:      8px 0 16px 1.2em;
	padding:     0;
}

.azuri-faq__answer li {
	margin-bottom: 4px;
}

.azuri-faq__answer a {
	color:           var(--azuri-color-teal, #2aadb5);
	text-decoration: underline;
}

.azuri-faq__answer a:hover {
	color: var(--azuri-color-teal-700, #0e5f65);
}

/* "No results" message shown by JS when a filter returns nothing */
.azuri-faq__no-results {
	color:       var(--azuri-color-slate, #5a6f80);
	font-family: var(--azuri-font-family-base);
	font-size:   15px;
	padding:     24px 0;
	display:     none;
}

.azuri-faq__no-results--visible {
	display: block;
}

/* ==========================================================================
   5. CTA BAR
   ========================================================================== */

.azuri-faq__cta {
	align-items:      center;
	background-color: #f5f9fa;
	border-radius:    14px;
	display:          flex;
	justify-content:  space-between;
	margin-top:       40px;
	padding:          22px 28px;
}

.azuri-faq__cta-copy {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.azuri-faq__cta-title {
	color:       var(--azuri-color-ink, #2e404f);
	font-family: var(--azuri-font-family-base);
	font-size:   18px;
	font-weight: var(--azuri-font-weight-medium, 500);
	line-height: 1;
	margin:      0;
}

.azuri-faq__cta-subtitle {
	color:       var(--azuri-color-slate, #5a6f80);
	font-family: var(--azuri-font-family-base);
	font-size:   14px;
	font-weight: var(--azuri-font-weight-regular, 400);
	line-height: 1.5;
	margin:      0;
}

.azuri-faq__cta-actions {
	align-items: center;
	display:     flex;
	flex-shrink: 0;
	gap:         10px;
	margin-left: 24px;
}

.azuri-faq__cta-btn {
	border:         none;
	border-radius:  var(--azuri-radius-pill, 999px);
	cursor:         pointer;
	display:        inline-block;
	font-family:    var(--azuri-font-family-base);
	font-size:      13px;
	font-weight:    var(--azuri-font-weight-semibold, 600);
	line-height:    1;
	padding:        12px 20px;
	text-decoration: none;
	transition:     background-color 0.15s ease, opacity 0.15s ease;
	white-space:    nowrap;
}

.azuri-faq__cta-btn--teal {
	background-color: var(--azuri-color-teal, #2aadb5);
	color:            var(--azuri-color-white, #fff);
}

.azuri-faq__cta-btn--teal:hover {
	background-color: var(--azuri-color-teal-700, #0e5f65);
	color:            var(--azuri-color-white, #fff);
}

.azuri-faq__cta-btn--pink {
	background-color: var(--azuri-color-pink, #d4799a);
	color:            var(--azuri-color-white, #fff);
}

.azuri-faq__cta-btn--pink:hover {
	background-color: var(--azuri-color-pink-700, #b85d80);
	color:            var(--azuri-color-white, #fff);
}

/* ==========================================================================
   6. RESPONSIVE — TABLET (≤1023px)
   ========================================================================== */

@media (max-width: 1023px) {
	.azuri-faq__layout {
		flex-direction: column;
		gap:            40px;
	}

	.azuri-faq__sidebar {
		width: 100%;
	}

	.azuri-faq__cat-list {
		flex-direction: row;
		flex-wrap:      wrap;
		gap:            8px;
	}

	.azuri-faq__cat-item {
		border:      1px solid #e1e8ed;
		border-radius: var(--azuri-radius-pill, 999px);
		gap:         8px;
		padding:     8px 14px;
		width:       auto;
	}

	.azuri-faq__cat-item--active {
		border-color: var(--azuri-color-teal, #2aadb5);
	}

	.azuri-faq__cat-count {
		display: inline;
	}

	.azuri-faq__cta {
		flex-direction: column;
		gap:            20px;
		text-align:     center;
	}

	.azuri-faq__cta-actions {
		margin-left: 0;
	}
}

/* ==========================================================================
   7. RESPONSIVE — MOBILE (≤767px)
   ========================================================================== */

@media (max-width: 767px) {
	.azuri-faq {
		padding-top:    60px;
		padding-bottom: 60px;
	}

	.azuri-faq__heading {
		font-size: 28px;
	}

	.azuri-faq__item {
		padding: 18px 20px;
	}

	.azuri-faq__header-left {
		flex-wrap: wrap;
		gap:       8px;
	}

	.azuri-faq__question {
		font-size: 15px;
	}

	.azuri-faq__cta {
		padding: 20px;
	}

	.azuri-faq__cta-actions {
		flex-direction: column;
		width:          100%;
	}

	.azuri-faq__cta-btn {
		text-align: center;
		width:      100%;
	}
}