/* ==========================================================================
   Exegypt FAQ — design tokens
   Matches the brand palette already established in board-members.css
   (#001844, #c99638, #002d72, rgba(0,45,114,0.08) hairlines, 2px radius).
   ========================================================================== */
.faq-page,
.faq-group {
	--faq-navy: #001844;
	--faq-navy-link: #002d72;
	--faq-gold: #c99638;
	--faq-gray-body: #667085;
	--faq-gray-muted: #9ea8b3;
	--faq-gray-light: #b0bac6;
	--faq-gray-row: #475467;
	--faq-bg-panel: #f8f9fc;
	--faq-border: rgba(0, 45, 114, 0.08);
	--faq-border-strong: rgba(0, 45, 114, 0.15);
	--faq-active-bg: rgba(0, 24, 68, 0.06);
	--faq-radius: 2px;
	--faq-font-heading: 'Montserrat', sans-serif;
	--faq-font-body: 'Inter', sans-serif;

	font-family: var(--faq-font-body);
	color: var(--faq-gray-body);
	max-width: 100%;
}

.faq-page * ,
.faq-group * {
	box-sizing: border-box;
}

/**
 * The parent Astra theme applies its own global skin to every raw <button>
 * on the site (gray background, border, padding at rest; a color/border
 * swap on :hover) — see wp-content/themes/astra/assets/css/minified/
 * style.min.css. Our own classed selectors already beat Astra's element-
 * level selectors on specificity at rest, but we had never defined :hover/
 * :focus states of our own, so those states fell through to Astra's theme
 * defaults. The fix is simply to own every state explicitly below — no
 * !important or reset hacks needed once every state has a real rule with
 * higher specificity than a bare `button`/`button:hover`.
 */
.faq-page button,
.faq-group button {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: inherit;
}

.faq-page a,
.faq-group a {
	transition: color 180ms ease-out;
}

.faq-page :focus-visible,
.faq-group :focus-visible {
	outline: 2px solid var(--faq-gold);
	outline-offset: 2px;
	border-radius: 1px;
}

/* ==========================================================================
   Search
   ========================================================================== */
.faq-search {
	margin-bottom: 32px;
}

.faq-search-input {
	width: 100%;
	padding: 16px 20px;
	background: #ffffff;
	border-radius: var(--faq-radius);
	border: 1px solid var(--faq-border-strong);
	box-shadow: 0 2px 8px rgba(0, 24, 68, 0.05);
	font-family: var(--faq-font-body);
	font-size: 14.5px;
	color: var(--faq-navy);
	transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.faq-search-input::placeholder {
	color: var(--faq-gray-light);
}

.faq-search-input:hover {
	border-color: var(--faq-gray-muted);
}

.faq-search-input:focus {
	outline: none;
	border-color: var(--faq-gold);
	box-shadow: 0 2px 8px rgba(0, 24, 68, 0.05), 0 0 0 3px rgba(201, 150, 56, 0.15);
}

/* ==========================================================================
   Layout
   ========================================================================== */
.faq-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.faq-sidebar-col {
	display: flex;
	flex-direction: column;
	gap: 32px;
	position: sticky;
	top: 24px;
}

.faq-main-col {
	min-width: 0;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.faq-sidebar-heading {
	padding: 0 12px 12px;
	color: var(--faq-navy);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.faq-topic-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.faq-topic-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 12px;
	background: transparent;
	border: none;
	border-left: 1.5px solid transparent;
	border-radius: var(--faq-radius);
	cursor: pointer;
	text-align: left;
	font-family: var(--faq-font-body);
	transition: background-color 180ms ease-out, border-color 180ms ease-out;
}

/* Explicit border-left-color (not just background) is needed here: Astra's
   theme Customizer has a global button style (deep gold, configured under
   Global > Colors > Buttons) applied via a combined `button:hover,
   button:focus` selector. It's not just hover — a <button> stays focused
   after a click even once the mouse moves away, so :focus needs the exact
   same override or the gold reappears the moment :hover stops competing. */
.faq-topic-link:hover,
.faq-topic-link:focus {
	background: rgba(0, 24, 68, 0.035);
	border-left-color: transparent;
}

.faq-topic-link:active {
	background: rgba(0, 24, 68, 0.08);
}

.faq-topic-link.is-active,
.faq-topic-link.is-active:hover,
.faq-topic-link.is-active:focus {
	background: var(--faq-active-bg);
	border-left-color: var(--faq-gold);
}

.faq-topic-icon-name {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.faq-topic-icon-name .dashicons {
	flex: none;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--faq-gray-muted);
	transition: color 180ms ease-out;
}

.faq-topic-link:hover .dashicons,
.faq-topic-link:focus .dashicons {
	color: var(--faq-gray-row);
}

.faq-topic-link.is-active .dashicons {
	color: var(--faq-gold);
}

.faq-topic-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--faq-gray-row);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 180ms ease-out;
}

.faq-topic-link:hover .faq-topic-name,
.faq-topic-link:focus .faq-topic-name {
	color: var(--faq-navy);
}

.faq-topic-link.is-active .faq-topic-name {
	color: var(--faq-navy);
}

.faq-topic-count {
	flex: none;
	font-size: 11px;
	font-weight: 500;
	color: var(--faq-gray-muted);
	transition: color 180ms ease-out;
}

.faq-topic-link.is-active .faq-topic-count {
	color: var(--faq-gold);
}

/* ==========================================================================
   "Still have questions?" box
   ========================================================================== */
.faq-contact-box {
	padding: 16px;
	background: var(--faq-bg-panel);
	border-radius: var(--faq-radius);
	border: 1px solid var(--faq-border);
	transition: box-shadow 180ms ease-out;
}

.faq-contact-box:hover {
	box-shadow: 0 4px 16px rgba(0, 24, 68, 0.06);
}

.faq-contact-box-icon {
	color: var(--faq-gold);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.faq-contact-box-title {
	margin-top: 12px;
	color: var(--faq-navy);
	font-size: 13px;
	font-weight: 600;
}

.faq-contact-box-text {
	margin: 4px 0 12px;
	color: var(--faq-gray-body);
	font-size: 12px;
	line-height: 17px;
}

.faq-contact-box-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--faq-navy-link);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.faq-contact-box-link:hover {
	color: var(--faq-navy);
	text-decoration: underline;
}

/* ==========================================================================
   Main panel
   ========================================================================== */
.faq-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--faq-border);
}

.faq-panel-header-icon-wrap {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--faq-active-bg);
	border-radius: var(--faq-radius);
}

.faq-panel-header-icon-wrap .dashicons {
	color: var(--faq-gold);
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.faq-panel-title {
	margin: 0;
	color: var(--faq-navy);
	font-family: var(--faq-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
}

.faq-panel-count {
	margin: 0;
	color: var(--faq-gray-muted);
	font-size: 12px;
}

/* ==========================================================================
   Accordion (shared by faq-page panels and the standalone [faq_group])
   ========================================================================== */
.faq-accordion {
	border-top: 1px solid var(--faq-border);
}

.faq-group .faq-accordion {
	border-top: none;
}

.faq-accordion-item {
	border-bottom: 1px solid var(--faq-border);
}

.faq-accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background-color 180ms ease-out;
}

/* Scoped to the clickable toggle only, not the whole item — the item also
   contains the (non-interactive) answer text, and tinting that on hover
   read as a stray, unintentional highlight over body copy. Also covers
   :focus, not just :hover — see the .faq-topic-link comment above for why
   both are needed against Astra's global button skin: a clicked question
   stays focused (and therefore gold, without this) after the mouse leaves. */
.faq-accordion-toggle:hover,
.faq-accordion-toggle:focus {
	background: rgba(0, 24, 68, 0.035);
	border-color: transparent;
}

.faq-question-text {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--faq-navy);
	font-family: var(--faq-font-heading);
	font-size: 15px;
	font-weight: 600;
	line-height: 21px;
}

.faq-item-topic-label {
	flex: none;
	display: none;
	padding: 2px 10px;
	background: var(--faq-active-bg);
	border-radius: 999px;
	color: var(--faq-gray-row);
	font-size: 11px;
	font-weight: 500;
}

.faq-page.is-searching .faq-item-topic-label {
	display: inline-block;
}

.faq-page.is-searching .faq-panel-header,
.faq-page.is-searching .faq-next-link {
	display: none;
}

.faq-accordion-icon {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
}

.faq-accordion-icon::before,
.faq-accordion-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--faq-gold);
	transform: translate(-50%, -50%);
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease-out;
}

.faq-accordion-icon::before {
	width: 10px;
	height: 1.5px;
}

.faq-accordion-icon::after {
	width: 1.5px;
	height: 10px;
}

.faq-accordion-item.is-open .faq-accordion-icon::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.faq-accordion-toggle:hover .faq-accordion-icon::before,
.faq-accordion-toggle:hover .faq-accordion-icon::after,
.faq-accordion-toggle:focus .faq-accordion-icon::before,
.faq-accordion-toggle:focus .faq-accordion-icon::after {
	background: var(--faq-navy);
}

/**
 * Smooth expand/collapse via max-height, not the grid-template-rows 0fr/1fr
 * trick (tried first, reverted): that technique depends on the grid item's
 * automatic minimum size resolving to 0, which has real cross-browser edge
 * cases and — as seen in practice here — could leave a "closed" answer
 * still visibly rendered. max-height + overflow:hidden is the older, far
 * more battle-tested pattern; the fixed cap is set comfortably above any
 * realistic answer length.
 */
.faq-accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item.is-open .faq-accordion-panel {
	max-height: 2000px;
}

.faq-accordion-panel-inner {
	padding: 0 32px 20px 0;
	color: var(--faq-gray-body);
	font-size: 13.5px;
	line-height: 22px;
}

.faq-accordion-panel-inner > *:first-child {
	margin-top: 0;
}

.faq-accordion-panel-inner > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.faq-accordion-panel,
	.faq-accordion-icon::before,
	.faq-accordion-icon::after {
		transition: none;
	}
}

/* ==========================================================================
   "Next: {Topic}" link
   ========================================================================== */
.faq-next-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--faq-gray-body);
	font-size: 13px;
	font-weight: 500;
	transition: color 180ms ease-out, gap 180ms ease-out;
}

/* Explicit background/border here too, for the same reason as
   .faq-topic-link above — this is a plain <button> with no hover/focus
   rule of its own previously, so Astra's site-wide deep-gold button skin
   (background-color + border-color, applied via a combined `:hover,
   :focus` selector in the theme's Customizer output) was the only rule
   touching those properties. Covering :focus too matters here specifically
   because clicking "Next" both opens the next topic AND leaves the button
   focused — without this, the gold box would reappear the instant the
   mouse moved away even though :hover had stopped applying. */
.faq-next-link:hover,
.faq-next-link:focus {
	color: var(--faq-navy);
	gap: 16px;
	background: none;
	border-color: transparent;
}

/* ==========================================================================
   Standalone [faq_group] embed
   ========================================================================== */
.faq-group {
	width: 100%;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Smaller laptops: keep the two-column layout, just tighten spacing so
   nothing feels cramped or overflows on 1280x800 / 1366x768-class screens. */
@media (max-width: 1199px) {
	.faq-layout {
		grid-template-columns: 220px 1fr;
		gap: 28px;
	}
}

/* Tablets and below: sidebar collapses into a wrapping grid of topic pills
   above the content; contact box moves below the accordion. */
@media (max-width: 991px) {
	/* Flex/grid items default to min-width:auto, which sizes them to fit
	   their content's intrinsic width — with enough topics, that pushed the
	   whole page wider than the viewport. min-width:0 down this whole chain
	   is what lets the layout actually respect the viewport width. */
	.faq-page {
		overflow-x: hidden;
	}

	.faq-layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
		min-width: 0;
	}

	.faq-sidebar-col {
		display: contents;
	}

	.faq-sidebar {
		order: 1;
		position: static;
		min-width: 0;
	}

	.faq-main-col {
		order: 2;
	}

	.faq-contact-box {
		order: 3;
	}

	/* Wraps into a grid of pills instead of scrolling horizontally — with
	   enough topics, a scroll row hid topics off-screen unless the visitor
	   thought to scroll sideways. Wrapping trades some vertical space for
	   every topic being visible without any hidden/scrollable content. */
	.faq-topic-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		min-width: 0;
		max-width: 100%;
	}

	.faq-topic-link {
		flex: none;
		width: auto;
		min-height: 40px;
		padding: 10px 14px;
		border-left: none;
		border: 1px solid var(--faq-border);
		white-space: nowrap;
	}

	/* Fully self-contained hover/focus/active border handling at this
	   breakpoint (rather than leaning on the desktop-scoped :hover rule
	   above, which only touches border-left-color — the left-indicator
	   style that only makes sense for the vertical list, not this
	   all-sides pill border). */
	.faq-topic-link:hover,
	.faq-topic-link:focus {
		border-color: var(--faq-gray-muted);
	}

	.faq-topic-link.is-active,
	.faq-topic-link.is-active:hover,
	.faq-topic-link.is-active:focus {
		border-color: var(--faq-gold);
	}

	.faq-topic-name {
		white-space: nowrap;
	}
}

/* Mobile */
@media (max-width: 599px) {
	.faq-search-input {
		padding: 12px 16px;
		font-size: 14px;
	}

	.faq-topic-link {
		padding: 8px 12px;
	}

	.faq-topic-name {
		font-size: 12.5px;
	}

	.faq-panel-title {
		font-size: 17px;
		line-height: 24px;
	}

	.faq-question-text {
		font-size: 14px;
		line-height: 20px;
	}

	.faq-accordion-toggle {
		align-items: flex-start;
		min-height: 40px;
	}

	.faq-accordion-panel-inner {
		padding-right: 0;
	}

	.faq-next-link {
		min-height: 40px;
	}
}