/* BP FAQ Category Nav widget styles
 *
 * Replacement for the previous "bp-faq-theme" section.
 * Reuses the existing Barbary V2 palette and spacing
 * system — no new tokens, no new shadows, no new
 * font rules.
 *
 * Visual stack (bottom to top):
 *   0. Page cream background (#FBF6EC)
 *   1. Centered 1320px inner container
 *   2. Section header (eyebrow / serif H2 / sans intro)
 *   3. Asymmetric 5-tile grid:
 *        - top row: 2 wider tiles
 *        - bottom row: 3 standard tiles
 *
 * Each tile:
 *   - cream-soft background, hairline border, soft radius
 *   - number top-left, count top-right
 *   - serif-free title (sans) + term description
 *   - bottom CTA row with gold dot + "VOIR LES QUESTIONS" label + arrow
 *
 * Color tokens (existing V2 palette, no new tokens):
 *   --bp-fcn-bg:        #FBF6EC
 *   --bp-fcn-cream-1:   #F4ECDD  (header gold line / CTA dot)
 *   --bp-fcn-tile-bg:   #F2EBDA
 *   --bp-fcn-tile-bd:   #E4DCCB
 *   --bp-fcn-green:     #374F37
 *   --bp-fcn-green-2:   #2F4A2F
 *   --bp-fcn-text:      #1F2A1F
 *   --bp-fcn-soft:      #5C6A5C
 *   --bp-fcn-gold:      #B8B25A
 */

.bp-faq-category-nav {
	--bp-fcn-bg:        #FBF6EC;
	--bp-fcn-cream-1:   #F4ECDD;
	--bp-fcn-tile-bg:   #F2EBDA;
	--bp-fcn-tile-bd:   #E4DCCB;
	--bp-fcn-green:     #374F37;
	--bp-fcn-green-2:   #2F4A2F;
	--bp-fcn-text:      #1F2A1F;
	--bp-fcn-soft:      #5C6A5C;
	--bp-fcn-gold:      #B8B25A;

	--bp-fcn-inner-max: 1320px;
	--bp-fcn-grid-gap:  20px;

	--bp-fcn-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-fcn-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	inline-size: 100%;
	max-inline-size: none;
	padding-block: clamp(64px, 8vw, 96px);
	background: var(--bp-fcn-bg);
	color: var(--bp-fcn-text);
	font-family: var(--bp-fcn-font-body);
}

.bp-faq-category-nav *,
.bp-faq-category-nav *::before,
.bp-faq-category-nav *::after {
	box-sizing: border-box;
}

/* ---- Inner container ---- */
.bp-faq-category-nav .bp-fcn__inner {
	inline-size: 100%;
	max-inline-size: var(--bp-fcn-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
}

/* =========================================================
 * Header
 * Same eyebrow + serif H2 + sans intro as the rest of the
 * V2 navs (bp-cultures-context-nav, bp-results-context-guide).
 * ========================================================= */
.bp-faq-category-nav .bp-fcn__header {
	inline-size: 100%;
	max-inline-size: 760px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.bp-faq-category-nav .bp-fcn__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--bp-fcn-green);
	font-family: var(--bp-fcn-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.bp-faq-category-nav .bp-fcn__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-fcn-gold);
}

.bp-faq-category-nav .bp-fcn__title {
	margin: 0;
	font-family: var(--bp-fcn-font-display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.12;
	letter-spacing: -0.005em;
	color: #374F3C;
}

.bp-faq-category-nav .bp-fcn__intro {
	margin: 0;
	font-family: var(--bp-fcn-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bp-fcn-soft);
	max-inline-size: 640px;
}

/* =========================================================
 * Grid
 * 6-column track. First 2 tiles span 3 (wider). Next 3
 * span 2 (standard). Total: 3 + 3 + 2 + 2 + 2 = 12.
 * Result: 2 wide + 3 standard on 2 rows.
 * ========================================================= */
.bp-faq-category-nav .bp-fcn__grid {
	inline-size: 100%;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--bp-fcn-grid-gap);
	align-items: stretch;
}

.bp-faq-category-nav .bp-fcn__tile--wide {
	grid-column: span 3;
}
.bp-faq-category-nav .bp-fcn__tile--standard {
	grid-column: span 2;
}

/* =========================================================
 * Tile
 * ========================================================= */
.bp-faq-category-nav .bp-fcn__tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	background: var(--bp-fcn-tile-bg);
	border: 1px solid var(--bp-fcn-tile-bd);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
				border-color 0.35s ease,
				background-color 0.35s ease;
}

.bp-faq-category-nav .bp-fcn__tile:hover,
.bp-faq-category-nav .bp-fcn__tile:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(55, 79, 55, 0.22);
	background: #F7F1E2;
	outline: none;
}

.bp-faq-category-nav .bp-fcn__tile-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	block-size: 100%;
	min-block-size: 100%;
}

/* ---- Tile top: number + count ---- */
.bp-faq-category-nav .bp-fcn__tile-top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--bp-fcn-font-body);
	color: var(--bp-fcn-green);
}

.bp-faq-category-nav .bp-fcn__tile-number {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bp-fcn-gold);
	line-height: 1;
}

.bp-faq-category-nav .bp-fcn__tile-count {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bp-fcn-soft);
	padding: 4px 10px;
	background: rgba(244, 236, 221, 0.7);
	border: 1px solid rgba(55, 79, 55, 0.10);
	border-radius: 999px;
	line-height: 1;
}

/* ---- Tile body: name + description ---- */
.bp-faq-category-nav .bp-fcn__tile-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-block-size: 0;
}

.bp-faq-category-nav .bp-fcn__tile-name {
	margin: 0;
	font-family: var(--bp-fcn-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--bp-fcn-text);
	word-break: break-word;
}

.bp-faq-category-nav .bp-fcn__tile-desc {
	margin: 0;
	font-family: var(--bp-fcn-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-fcn-soft);
	word-break: break-word;
}

/* ---- Tile bottom CTA row ---- */
.bp-faq-category-nav .bp-fcn__tile-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(244, 236, 221, 0.7);
	border: 1px solid rgba(55, 79, 55, 0.14);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: var(--bp-fcn-green);
	line-height: 1;
	align-self: flex-start;
	margin-block-start: auto;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bp-faq-category-nav .bp-fcn__tile-cta-dot {
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-fcn-gold);
	border-radius: 999px;
	flex: 0 0 auto;
	transition: background-color 0.3s ease;
}

.bp-faq-category-nav .bp-fcn__tile-cta-label {
	white-space: nowrap;
}

.bp-faq-category-nav .bp-fcn__tile-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-fcn-green);
	transition: transform 0.3s ease, color 0.3s ease;
}
.bp-faq-category-nav .bp-fcn__tile-cta-arrow svg {
	display: block;
	stroke: currentColor;
}

[dir="rtl"] .bp-faq-category-nav .bp-fcn__tile-cta-arrow,
[lang="ar"] .bp-faq-category-nav .bp-fcn__tile-cta-arrow {
	transform: scaleX(-1);
}

.bp-faq-category-nav .bp-fcn__tile:hover .bp-fcn__tile-cta,
.bp-faq-category-nav .bp-fcn__tile:focus-visible .bp-fcn__tile-cta {
	background: var(--bp-fcn-green);
	color: var(--bp-fcn-bg);
	border-color: var(--bp-fcn-green);
}
.bp-faq-category-nav .bp-fcn__tile:hover .bp-fcn__tile-cta-arrow,
.bp-faq-category-nav .bp-fcn__tile:focus-visible .bp-fcn__tile-cta-arrow {
	color: var(--bp-fcn-bg);
	transform: translateX(3px);
}
[dir="rtl"] .bp-faq-category-nav .bp-fcn__tile:hover .bp-fcn__tile-cta-arrow,
[lang="ar"]  .bp-faq-category-nav .bp-fcn__tile:hover .bp-fcn__tile-cta-arrow,
[dir="rtl"] .bp-faq-category-nav .bp-fcn__tile:focus-visible .bp-fcn__tile-cta-arrow,
[lang="ar"]  .bp-faq-category-nav .bp-fcn__tile:focus-visible .bp-fcn__tile-cta-arrow {
	transform: scaleX(-1) translateX(3px);
}

/* =========================================================
 * Tablet (769-1024)
 * ========================================================= */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-faq-category-nav .bp-fcn__title { font-size: 34px; }
	.bp-faq-category-nav .bp-fcn__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bp-faq-category-nav .bp-fcn__tile--wide,
	.bp-faq-category-nav .bp-fcn__tile--standard {
		grid-column: span 1;
	}
	.bp-faq-category-nav .bp-fcn__tile-name { font-size: 19px; }
}

/* =========================================================
 * Mobile (<= 768)
 * ========================================================= */
@media ( max-width: 768px ) {
	.bp-faq-category-nav { padding-block: 56px; }
	.bp-faq-category-nav .bp-fcn__inner {
		padding-inline: clamp(16px, 5vw, 22px);
		gap: 32px;
	}
	.bp-faq-category-nav .bp-fcn__header {
		gap: 12px;
	}
	.bp-faq-category-nav .bp-fcn__title { font-size: 30px; line-height: 1.14; }
	.bp-faq-category-nav .bp-fcn__intro { font-size: 15px; }
	.bp-faq-category-nav .bp-fcn__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
	.bp-faq-category-nav .bp-fcn__eyebrow-line { inline-size: 28px; }

	.bp-faq-category-nav .bp-fcn__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.bp-faq-category-nav .bp-fcn__tile--wide,
	.bp-faq-category-nav .bp-fcn__tile--standard {
		grid-column: span 1;
	}
	.bp-faq-category-nav .bp-fcn__tile-inner {
		padding: 22px;
		gap: 16px;
	}
	.bp-faq-category-nav .bp-fcn__tile-name { font-size: 18px; }
	.bp-faq-category-nav .bp-fcn__tile-desc { font-size: 13.5px; }
}

/* =========================================================
 * ≤ 480
 * ========================================================= */
@media ( max-width: 480px ) {
	.bp-faq-category-nav { padding-block: 48px; }
	.bp-faq-category-nav .bp-fcn__title { font-size: 26px; }
	.bp-faq-category-nav .bp-fcn__tile-inner { padding: 20px; }
	.bp-faq-category-nav .bp-fcn__tile-name { font-size: 17px; }
	.bp-faq-category-nav .bp-fcn__tile-cta-label { font-size: 11.5px; letter-spacing: 0.08em; }
}

/* =========================================================
 * ≤ 390
 * ========================================================= */
@media ( max-width: 390px ) {
	.bp-faq-category-nav { padding-block: 44px; }
	.bp-faq-category-nav .bp-fcn__title { font-size: 23px; }
	.bp-faq-category-nav .bp-fcn__tile-inner { padding: 18px; gap: 14px; }
	.bp-faq-category-nav .bp-fcn__tile-name { font-size: 16px; }
	.bp-faq-category-nav .bp-fcn__tile-cta { padding: 9px 12px; gap: 8px; }
}

/* =========================================================
 * ≤ 360
 * ========================================================= */
@media ( max-width: 360px ) {
	.bp-faq-category-nav .bp-fcn__title { font-size: 21px; }
	.bp-faq-category-nav .bp-fcn__tile-inner { padding: 16px; }
	.bp-faq-category-nav .bp-fcn__tile-name { font-size: 15.5px; }
	.bp-faq-category-nav .bp-fcn__tile-desc { font-size: 13px; }
}

/* =========================================================
 * Arabic / RTL
 * ========================================================= */
[lang="ar"] .bp-faq-category-nav,
[dir="rtl"] .bp-faq-category-nav {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

[lang="ar"] .bp-faq-category-nav .bp-fcn__title,
[dir="rtl"] .bp-faq-category-nav .bp-fcn__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

[lang="ar"] .bp-faq-category-nav .bp-fcn__tile-name,
[dir="rtl"] .bp-faq-category-nav .bp-fcn__tile-name {
	font-weight: 700;
	letter-spacing: 0;
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media ( prefers-reduced-motion: reduce ) {
	.bp-faq-category-nav [data-bp-stagger],
	.bp-faq-category-nav .bp-fcn__tile,
	.bp-faq-category-nav .bp-fcn__tile-cta,
	.bp-faq-category-nav .bp-fcn__tile-cta-arrow {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}