/**
 * Foro Academia – Public Styles
 * Academia Contralores brand redesign.
 * Modern, professional forum UI built with CSS custom properties and BEM.
 */

/* ==========================================================================
   CSS Custom Properties – Academia Contralores Brand
   ========================================================================== */

:root {
	/* Brand colours */
	--fa-primary:       #5DBE42;
	--fa-primary-dark:  #3A8C2E;
	--fa-primary-light: #E8F7E3;
	--fa-header-bg:     #4A4A4A;
	--fa-nav-bg:        #5DBE42;
	--fa-gray:          #58595B;
	--fa-gray-light:    #8A8B8D;
	--fa-gray-border:   #D8D9DA;
	--fa-bg:            #F4F4F4;
	--fa-white:         #FFFFFF;
	--fa-danger:        #D93025;
	--fa-danger-dark:   #B02418;
	--fa-warning:       #F59E0B;
	--fa-info:          #3B82F6;

	/* Shadows */
	--fa-shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
	--fa-shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
	--fa-shadow:     0 2px 10px rgba(0,0,0,0.10);
	--fa-shadow-md:  0 4px 16px rgba(0,0,0,0.12);
	--fa-shadow-lg:  0 8px 32px rgba(0,0,0,0.14);

	/* Radii */
	--fa-radius-xs:  3px;
	--fa-radius-sm:  5px;
	--fa-radius:     8px;
	--fa-radius-lg:  12px;
	--fa-radius-xl:  20px;
	--fa-radius-pill:999px;

	/* Typography */
	--fa-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	           "Helvetica Neue", Arial, sans-serif;

	/* Transitions */
	--fa-transition: 0.18s ease;
	--fa-transition-md: 0.28s ease;
}

/* ==========================================================================
   Sticky Forum Header
   ========================================================================== */

.fa-forum-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--fa-header-bg);
	height: 70px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.28);
}

.fa-forum-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	height: 100%;
}

/* Brand / Logo */
.fa-forum-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	text-decoration: none;
}

.fa-forum-header__brand a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.fa-forum-header__logo {
	height: 44px;
	width: auto;
	display: block;
	object-fit: contain;
}

.fa-forum-header__site-name {
	font-size: 17px;
	font-weight: 700;
	color: var(--fa-primary);
	letter-spacing: -0.3px;
	white-space: nowrap;
	font-family: var(--fa-font);
}

/* Header search */
.fa-forum-header__search {
	flex: 1;
	max-width: 480px;
	margin: 0 auto;
}

.fa-header-search {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--fa-radius-pill);
	overflow: hidden;
	transition: background var(--fa-transition), border-color var(--fa-transition);
}

.fa-header-search:focus-within {
	background: rgba(255,255,255,0.18);
	border-color: var(--fa-primary);
}

.fa-header-search__input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 14px;
	font-family: var(--fa-font);
	padding: 10px 16px;
}

.fa-header-search__input::placeholder {
	color: rgba(255,255,255,0.55);
}

.fa-header-search__btn {
	background: var(--fa-primary);
	border: none;
	color: #fff;
	padding: 0 18px;
	height: 40px;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--fa-transition);
	flex-shrink: 0;
}

.fa-header-search__btn:hover {
	background: var(--fa-primary-dark);
}

/* Header user area */
.fa-forum-header__user {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-left: auto;
}

.fa-header-username {
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,0.88);
	font-family: var(--fa-font);
}

.fa-header-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: var(--fa-radius-pill);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--fa-font);
	text-decoration: none;
	transition: all var(--fa-transition);
	border: 1px solid rgba(255,255,255,0.28);
	color: rgba(255,255,255,0.88);
	background: transparent;
	cursor: pointer;
}

.fa-header-btn:hover {
	border-color: rgba(255,255,255,0.60);
	color: #fff;
	text-decoration: none;
}

.fa-header-btn--primary {
	background: var(--fa-primary);
	border-color: var(--fa-primary);
	color: #fff;
}

.fa-header-btn--primary:hover {
	background: var(--fa-primary-dark);
	border-color: var(--fa-primary-dark);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   Forum Nav Bar (green breadcrumb ribbon)
   ========================================================================== */

.fa-forum-nav {
	background: var(--fa-primary);
	height: 40px;
	display: flex;
	align-items: center;
}

.fa-forum-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.fa-forum-nav__label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,0.92);
	letter-spacing: 0.3px;
	font-family: var(--fa-font);
	text-transform: uppercase;
}

/* ==========================================================================
   Base / Main Container
   ========================================================================== */

.fa-forum {
	font-family: var(--fa-font);
	color: var(--fa-gray);
	line-height: 1.65;
	width: 100%;
	padding: 28px 32px 48px;
	font-size: 15px;
	background: var(--fa-bg);
	min-height: 80vh;
	box-sizing: border-box;
}

.fa-forum *,
.fa-forum *::before,
.fa-forum *::after {
	box-sizing: border-box;
}

.fa-forum a {
	color: var(--fa-primary-dark);
	text-decoration: none;
	transition: color var(--fa-transition);
}

.fa-forum a:hover {
	color: var(--fa-primary);
	text-decoration: underline;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.fa-breadcrumbs {
	display: flex;
	align-items: center;
	padding: 10px 0 20px;
	font-size: 13px;
	color: var(--fa-gray-light);
}

.fa-breadcrumbs__list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.fa-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fa-breadcrumbs__item:not(:last-child)::after {
	content: '›';
	color: var(--fa-gray-border);
	font-size: 14px;
}

.fa-breadcrumbs__link {
	color: var(--fa-primary-dark);
	font-weight: 500;
	transition: color var(--fa-transition);
}

.fa-breadcrumbs__link:hover {
	color: var(--fa-primary);
	text-decoration: none;
}

.fa-breadcrumbs__current {
	color: var(--fa-gray);
	font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.fa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: var(--fa-radius);
	cursor: pointer;
	transition: all var(--fa-transition);
	line-height: 1.4;
	font-family: var(--fa-font);
	text-decoration: none;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

.fa-btn .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.fa-btn--primary {
	background: var(--fa-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(93,190,66,0.30);
}

.fa-btn--primary:hover {
	background: var(--fa-primary-dark);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(93,190,66,0.40);
	transform: translateY(-1px);
}

.fa-btn--secondary {
	background: var(--fa-white);
	color: var(--fa-primary-dark);
	border: 1.5px solid var(--fa-primary);
}

.fa-btn--secondary:hover {
	background: var(--fa-primary-light);
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-btn--ghost {
	background: transparent;
	color: var(--fa-gray);
	border: 1.5px solid var(--fa-gray-border);
}

.fa-btn--ghost:hover {
	background: var(--fa-bg);
	color: var(--fa-gray);
	text-decoration: none;
	border-color: var(--fa-gray-light);
}

.fa-btn--danger {
	background: var(--fa-danger);
	color: #fff;
}

.fa-btn--danger:hover {
	background: var(--fa-danger-dark);
	color: #fff;
	text-decoration: none;
}

.fa-btn--sm {
	padding: 6px 14px;
	font-size: 13px;
	border-radius: var(--fa-radius-sm);
}

.fa-btn--sm .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   Badges / Pills
   ========================================================================== */

.fa-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--fa-radius-pill);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1.4;
	font-family: var(--fa-font);
}

.fa-badge .dashicons {
	font-size: 11px;
	width: 11px;
	height: 11px;
}

/* Role badges */
.fa-badge--admin {
	background: var(--fa-primary-dark);
	color: #fff;
}

.fa-badge--orador,
.fa-badge--moderator {
	background: var(--fa-primary);
	color: #fff;
}

.fa-badge--usuario,
.fa-badge--subscriber {
	background: var(--fa-gray-light);
	color: #fff;
}

/* Status badges */
.fa-badge--pinned {
	background: var(--fa-primary);
	color: #fff;
}

.fa-badge--closed {
	background: var(--fa-gray-light);
	color: #fff;
}

.fa-badge--new {
	background: var(--fa-info);
	color: #fff;
}

/* ==========================================================================
   Forum Stats Bar (inside category / top of topic list)
   ========================================================================== */

.fa-stats-bar {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 12px 20px;
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius);
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--fa-gray-light);
}

.fa-stats-bar__item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fa-stats-bar__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--fa-primary-dark);
}

.fa-stats-bar__label {
	font-size: 13px;
	color: var(--fa-gray-light);
}

/* ==========================================================================
   Hero / Welcome Banner
   ========================================================================== */

.fa-hero {
	background: linear-gradient(135deg, #1a3a1a 0%, #2d5a27 55%, #3A8C2E 100%);
	padding: 44px 64px;
	width: calc(100% + 64px);
	margin-left: -32px;
	margin-right: -32px;
	margin-top: -24px;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.fa-hero::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(93,190,66,0.12);
	pointer-events: none;
}

.fa-hero::after {
	content: '';
	position: absolute;
	bottom: -40px;
	left: 30%;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(93,190,66,0.08);
	pointer-events: none;
}

.fa-hero__inner {
	max-width: 860px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.fa-hero__top {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 28px;
}

.fa-hero__logo {
	height: 56px;
	width: auto;
	max-width: 180px;
	display: block;
	flex-shrink: 0;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.fa-hero__text {
	min-width: 0;
}

.fa-hero__title {
	font-family: var(--fa-font);
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1.25;
	letter-spacing: -0.2px;
}

.fa-hero__subtitle {
	font-family: var(--fa-font);
	font-size: 14px;
	color: rgba(255,255,255,0.72);
	margin: 0;
	line-height: 1.6;
}

.fa-hero__search-form {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.14);
	border: 1.5px solid rgba(255,255,255,0.28);
	border-radius: var(--fa-radius-pill);
	overflow: hidden;
	transition: background var(--fa-transition), border-color var(--fa-transition);
}

.fa-hero__search-form:focus-within {
	background: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.55);
}

.fa-hero__search-icon {
	color: rgba(255,255,255,0.6);
	font-size: 18px;
	width: 18px;
	height: 18px;
	margin-left: 16px;
	flex-shrink: 0;
}

.fa-hero__search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-family: var(--fa-font);
	font-size: 15px;
	padding: 13px 16px;
}

.fa-hero__search-input::placeholder {
	color: rgba(255,255,255,0.5);
}

.fa-hero__search-btn {
	background: var(--fa-primary);
	border: none;
	color: #fff;
	font-family: var(--fa-font);
	font-size: 14px;
	font-weight: 600;
	padding: 0 24px;
	height: 48px;
	cursor: pointer;
	transition: background var(--fa-transition);
	flex-shrink: 0;
	white-space: nowrap;
}

.fa-hero__search-btn:hover {
	background: var(--fa-primary-dark);
}

/* ==========================================================================
   Search Bar (inline, below header – forum-main page)
   ========================================================================== */

.fa-search-bar {
	margin-top: 0;
	margin-bottom: 28px;
}

.fa-search-bar__form {
	display: flex;
	align-items: center;
	background: var(--fa-white);
	border: 1.5px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-pill);
	overflow: hidden;
	box-shadow: var(--fa-shadow-sm);
	transition: border-color var(--fa-transition), box-shadow var(--fa-transition);
}

.fa-search-bar__form:focus-within {
	border-color: var(--fa-primary);
	box-shadow: 0 0 0 3px rgba(93,190,66,0.18);
}

.fa-search-bar__input-wrap {
	display: flex;
	align-items: center;
	flex: 1;
	padding: 0 16px;
	gap: 10px;
}

.fa-search-bar__icon {
	color: var(--fa-gray-light);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.fa-search-bar__input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 15px;
	font-family: var(--fa-font);
	color: var(--fa-gray);
	padding: 14px 0;
	background: transparent;
}

.fa-search-bar__input::placeholder {
	color: var(--fa-gray-light);
}

.fa-search-bar__btn {
	background: var(--fa-primary);
	color: #fff;
	border: none;
	padding: 0 28px;
	height: 52px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--fa-font);
	letter-spacing: 0.3px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background var(--fa-transition);
	flex-shrink: 0;
}

.fa-search-bar__btn:hover {
	background: var(--fa-primary-dark);
}

/* ==========================================================================
   Category Cards (.fa-category-card  — home page grid)
   ========================================================================== */

.fa-categories {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fa-category-card {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg);
	border: 1px solid var(--fa-gray-border);
	border-left: 4px solid var(--fa-primary);
	box-shadow: var(--fa-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--fa-transition-md), transform var(--fa-transition-md);
	display: flex;
	flex-direction: column;
}

.fa-category-card:hover {
	box-shadow: var(--fa-shadow-md);
	transform: translateY(-2px);
}

.fa-category-card__main {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 24px 16px;
	flex: 1;
}

.fa-category-card__icon {
	width: 48px;
	height: 48px;
	background: var(--fa-primary-light);
	border-radius: var(--fa-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fa-category-card__icon .dashicons {
	color: var(--fa-primary-dark);
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.fa-category-card__info {
	flex: 1;
	min-width: 0;
}

.fa-category-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--fa-header-bg);
	margin: 0 0 6px;
	line-height: 1.3;
}

.fa-category-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fa-transition);
}

.fa-category-card__title a:hover {
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-category-card__desc {
	font-size: 14px;
	color: var(--fa-gray-light);
	margin: 0 0 10px;
	line-height: 1.55;
}

.fa-category-card__subcategories {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.fa-category-card__subcategories-label {
	font-size: 12px;
	color: var(--fa-gray-light);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 4px;
}

.fa-category-card__subcategories-label .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.fa-category-card__subcat-link {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--fa-primary-light);
	color: var(--fa-primary-dark);
	border-radius: var(--fa-radius-pill);
	font-size: 12px;
	font-weight: 600;
	transition: background var(--fa-transition), color var(--fa-transition);
	text-decoration: none;
}

.fa-category-card__subcat-link:hover {
	background: var(--fa-primary);
	color: #fff;
	text-decoration: none;
}

/* Stats row inside card */
.fa-category-card__stats {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px 24px;
	background: var(--fa-bg);
	border-top: 1px solid var(--fa-gray-border);
}

.fa-category-card__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.fa-category-card__stat-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--fa-primary-dark);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.fa-category-card__stat-label {
	font-size: 11px;
	color: var(--fa-gray-light);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

/* Last activity row */
.fa-category-card__activity {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 24px;
	background: var(--fa-white);
	border-top: 1px solid var(--fa-gray-border);
	font-size: 13px;
	color: var(--fa-gray-light);
}

.fa-category-card__activity .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--fa-primary);
	flex-shrink: 0;
}

.fa-category-card__activity-link {
	color: var(--fa-gray);
	font-weight: 500;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--fa-transition);
}

.fa-category-card__activity-link:hover {
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-category-card__activity-date {
	flex-shrink: 0;
	color: var(--fa-gray-light);
	font-size: 12px;
}

/* Topic list inside category card */
.fa-category-card__topics {
	border-top: 1px solid var(--fa-gray-border);
	padding-top: 4px;
	display: flex;
	flex-direction: column;
}

.fa-category-card__topic-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 20px;
	border-bottom: 1px solid var(--fa-gray-border);
	transition: background var(--fa-transition);
}

.fa-category-card__topic-row:last-child {
	border-bottom: none;
}

.fa-category-card__topic-row:hover {
	background: var(--fa-bg-light);
}

.fa-category-card__topic-icon {
	font-size: 15px;
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--fa-primary);
}

.fa-category-card__topic-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fa-category-card__topic-title {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--fa-gray);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color var(--fa-transition);
}

.fa-category-card__topic-title:hover {
	color: var(--fa-primary);
	text-decoration: none;
}

.fa-category-card__topic-meta {
	font-size: 0.75rem;
	color: var(--fa-gray-light);
}

.fa-category-card__topic-counts {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	font-size: 0.78rem;
	color: var(--fa-gray-light);
}

.fa-category-card__topic-counts span {
	display: flex;
	align-items: center;
	gap: 3px;
}

.fa-category-card__topic-counts .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.fa-badge--sm {
	padding: 1px 4px;
	font-size: 0.65rem;
}

/* ==========================================================================
   Category Header (top of category page)
   ========================================================================== */

.fa-category-header {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg);
	border-left: 4px solid var(--fa-primary);
	padding: 24px 28px;
	margin-bottom: 20px;
	box-shadow: var(--fa-shadow-sm);
}

/* Access denied block */
.fa-access-denied {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 64px 24px;
	gap: 16px;
}

.fa-access-denied__icon {
	font-size: 56px;
	width: 56px;
	height: 56px;
	color: var(--fa-gray-border);
}

.fa-access-denied__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--fa-gray);
	margin: 0;
}

.fa-access-denied__text {
	font-size: 0.95rem;
	color: var(--fa-text-muted);
	max-width: 400px;
	margin: 0;
}

.fa-category-header__title {
	font-size: 28px;
	font-weight: 800;
	color: var(--fa-header-bg);
	margin: 0 0 8px;
	line-height: 1.2;
}

.fa-category-header__desc {
	font-size: 15px;
	color: var(--fa-gray-light);
	margin: 0;
}

/* ==========================================================================
   Subcategory chips (inside category view)
   ========================================================================== */

.fa-subcategories {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg);
	border: 1px solid var(--fa-gray-border);
	padding: 18px 22px;
	margin-bottom: 20px;
	box-shadow: var(--fa-shadow-xs);
}

.fa-subcategories__heading {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--fa-gray-light);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.fa-subcategories__heading .dashicons {
	color: var(--fa-primary);
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.fa-subcategories__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fa-subcategory-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--fa-primary-light);
	border: 1px solid rgba(93,190,66,0.25);
	border-radius: var(--fa-radius-pill);
	text-decoration: none;
	transition: all var(--fa-transition);
}

.fa-subcategory-chip:hover {
	background: var(--fa-primary);
	border-color: var(--fa-primary);
	transform: translateY(-1px);
	box-shadow: var(--fa-shadow-sm);
	text-decoration: none;
}

.fa-subcategory-chip__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fa-primary-dark);
	transition: color var(--fa-transition);
}

.fa-subcategory-chip:hover .fa-subcategory-chip__name {
	color: #fff;
}

.fa-subcategory-chip__count {
	font-size: 12px;
	color: var(--fa-gray-light);
	background: rgba(255,255,255,0.70);
	padding: 2px 8px;
	border-radius: var(--fa-radius-pill);
	transition: color var(--fa-transition), background var(--fa-transition);
}

.fa-subcategory-chip:hover .fa-subcategory-chip__count {
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.15);
}

/* ==========================================================================
   Topic List (category page)
   ========================================================================== */

.fa-topic-list {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg);
	border: 1px solid var(--fa-gray-border);
	overflow: hidden;
	box-shadow: var(--fa-shadow-sm);
	margin-bottom: 24px;
}

.fa-topic-list__header {
	display: grid;
	grid-template-columns: 1fr 110px 90px 140px;
	padding: 12px 22px;
	background: var(--fa-bg);
	border-bottom: 1px solid var(--fa-gray-border);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--fa-gray-light);
}

.fa-topic-list__col {
	display: flex;
	align-items: center;
}

.fa-topic-list__col--replies,
.fa-topic-list__col--views,
.fa-topic-list__col--activity {
	justify-content: center;
}

/* Topic rows */
.fa-topic-row {
	display: grid;
	grid-template-columns: 1fr 110px 90px 140px;
	align-items: center;
	padding: 16px 22px;
	border-bottom: 1px solid var(--fa-gray-border);
	gap: 12px;
	transition: background var(--fa-transition);
}

.fa-topic-row:last-child {
	border-bottom: none;
}

.fa-topic-row:hover {
	background: var(--fa-primary-light);
}

.fa-topic-row--pinned {
	background: rgba(93,190,66,0.05);
}

.fa-topic-row--pinned:hover {
	background: var(--fa-primary-light);
}

.fa-topic-row--closed {
	opacity: 0.75;
}

.fa-topic-row__main {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.fa-topic-row__avatar {
	flex-shrink: 0;
}

.fa-topic-row__avatar img,
.fa-topic-row__avatar .avatar {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 2px solid var(--fa-gray-border);
}

.fa-topic-row__info {
	flex: 1;
	min-width: 0;
}

.fa-topic-row__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--fa-header-bg);
	margin: 0 0 4px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	line-height: 1.35;
}

.fa-topic-row__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--fa-transition);
}

.fa-topic-row__title a:hover {
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-topic-row__meta {
	font-size: 12px;
	color: var(--fa-gray-light);
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.fa-topic-row__author {
	font-weight: 600;
	color: var(--fa-gray);
}

.fa-topic-row__date {
	color: var(--fa-gray-light);
}

/* Stats columns */
.fa-topic-row__stats {
	display: contents;
}

.fa-topic-row__count {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fa-gray-light);
}

.fa-topic-row__count .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--fa-gray-border);
}

.fa-topic-row__count--replies {
	color: var(--fa-primary-dark);
}

.fa-topic-row__count--replies .dashicons {
	color: var(--fa-primary);
}

/* Activity column */
.fa-topic-row__activity {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa-topic-row__last-reply {
	font-size: 12px;
	color: var(--fa-gray-light);
	text-align: center;
	line-height: 1.4;
}

.fa-topic-row__last-reply--none {
	font-style: italic;
	font-size: 11px;
}

/* ==========================================================================
   Topic View – Header Card
   ========================================================================== */

.fa-topic {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.fa-topic__header {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg) var(--fa-radius-lg) 0 0;
	border: 1px solid var(--fa-gray-border);
	border-left: 4px solid var(--fa-primary);
	padding: 28px 32px 22px;
	box-shadow: var(--fa-shadow-sm);
}

.fa-topic__title-row {
	margin-bottom: 18px;
}

.fa-topic__title {
	font-size: 26px;
	font-weight: 800;
	color: var(--fa-header-bg);
	margin: 0;
	line-height: 1.25;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fa-topic__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.fa-topic__author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fa-topic__author img,
.fa-topic__author .avatar {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 2px solid var(--fa-gray-border);
}

.fa-topic__author-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--fa-gray);
}

.fa-topic__info {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 13px;
	color: var(--fa-gray-light);
	flex-wrap: wrap;
}

.fa-topic__date,
.fa-topic__views,
.fa-topic__reply-count {
	display: flex;
	align-items: center;
	gap: 5px;
}

.fa-topic__date .dashicons,
.fa-topic__views .dashicons,
.fa-topic__reply-count .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: var(--fa-primary);
}

/* ==========================================================================
   Moderation Toolbar
   ========================================================================== */

.fa-moderation {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--fa-primary-light) 0%, rgba(255,255,255,0.95) 100%);
	border: 1px solid rgba(93,190,66,0.30);
	border-top: none;
	border-bottom: none;
	flex-wrap: wrap;
}

.fa-moderation__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--fa-primary-dark);
	flex-shrink: 0;
}

.fa-moderation__label .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	color: var(--fa-primary);
}

/* Mod buttons styled as green pills */
.fa-mod-pin,
.fa-mod-close {
	background: var(--fa-primary);
	color: #fff;
	border-radius: var(--fa-radius-pill);
	border: none;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background var(--fa-transition), box-shadow var(--fa-transition);
	font-family: var(--fa-font);
}

.fa-mod-pin:hover,
.fa-mod-close:hover {
	background: var(--fa-primary-dark);
	box-shadow: 0 2px 8px rgba(93,190,66,0.35);
}

.fa-mod-delete {
	border-radius: var(--fa-radius-pill);
}

/* ==========================================================================
   Topic Content
   ========================================================================== */

.fa-topic__content {
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-top: none;
	padding: 28px 32px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--fa-gray);
}

.fa-topic__content:empty {
	display: none;
}

.fa-topic__content p {
	margin: 0 0 1em;
}

.fa-topic__content p:last-child {
	margin-bottom: 0;
}

.fa-topic__content h2,
.fa-topic__content h3,
.fa-topic__content h4 {
	color: var(--fa-header-bg);
	font-weight: 700;
	margin: 1.4em 0 0.5em;
	line-height: 1.3;
}

.fa-topic__content ul,
.fa-topic__content ol {
	padding-left: 1.6em;
	margin: 0 0 1em;
}

.fa-topic__content li {
	margin-bottom: 0.35em;
}

.fa-topic__content blockquote {
	border-left: 3px solid var(--fa-primary);
	margin: 1em 0;
	padding: 12px 18px;
	background: var(--fa-primary-light);
	border-radius: 0 var(--fa-radius) var(--fa-radius) 0;
	font-style: italic;
	color: var(--fa-gray-light);
}

.fa-topic__content code {
	background: var(--fa-bg);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-xs);
	padding: 2px 6px;
	font-size: 0.875em;
	font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
}

.fa-topic__content pre {
	background: #1E1E1E;
	color: #D4D4D4;
	border-radius: var(--fa-radius);
	padding: 18px 22px;
	overflow-x: auto;
	font-family: "Fira Code", Consolas, monospace;
	font-size: 13px;
	line-height: 1.6;
	margin: 1em 0;
}

.fa-topic__content pre code {
	background: transparent;
	border: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/* ==========================================================================
   Replies Section
   ========================================================================== */

.fa-replies {
	margin-top: 24px;
}

.fa-replies__heading {
	font-size: 16px;
	font-weight: 700;
	color: var(--fa-header-bg);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
}

.fa-replies__heading .dashicons {
	color: var(--fa-primary);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.fa-replies__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ==========================================================================
   Reply Cards
   ========================================================================== */

.fa-reply {
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-lg);
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	box-shadow: var(--fa-shadow-xs);
	transition: box-shadow var(--fa-transition);
}

.fa-reply:hover {
	box-shadow: var(--fa-shadow-sm);
}

/* Nested replies: indent + green left accent */
.fa-reply--nested {
	margin-left: 40px;
	border-left: 3px solid var(--fa-primary);
	border-radius: 0 var(--fa-radius-lg) var(--fa-radius-lg) 0;
}

.fa-reply--nested .fa-reply--nested {
	margin-left: 30px;
}

/* Sidebar (avatar column) */
.fa-reply__sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	width: 56px;
}

.fa-reply__avatar img,
.fa-reply__avatar .avatar {
	border-radius: 50%;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 2px solid var(--fa-gray-border);
	display: block;
}

/* Main reply body */
.fa-reply__body {
	flex: 1;
	min-width: 0;
}

.fa-reply__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.fa-reply__author-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fa-reply__author-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--fa-header-bg);
}

.fa-reply__date {
	font-size: 12px;
	color: var(--fa-gray-light);
}

.fa-reply__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.fa-reply-action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	border-radius: var(--fa-radius-pill);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--fa-font);
	border: 1.5px solid var(--fa-gray-border);
	background: transparent;
	color: var(--fa-gray-light);
	cursor: pointer;
	transition: all var(--fa-transition);
	text-decoration: none;
}

.fa-reply-action .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
}

.fa-reply-action:hover {
	background: var(--fa-primary-light);
	border-color: var(--fa-primary);
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-reply-action--danger:hover {
	background: #FEE2E2;
	border-color: var(--fa-danger);
	color: var(--fa-danger);
}

.fa-reply__content {
	font-size: 15px;
	line-height: 1.72;
	color: var(--fa-gray);
}

.fa-reply__content p {
	margin: 0 0 0.85em;
}

.fa-reply__content p:last-child {
	margin-bottom: 0;
}

.fa-reply__content blockquote {
	border-left: 3px solid var(--fa-primary);
	margin: 0.8em 0;
	padding: 10px 16px;
	background: var(--fa-primary-light);
	border-radius: 0 var(--fa-radius) var(--fa-radius) 0;
	font-style: italic;
	color: var(--fa-gray-light);
}

/* ==========================================================================
   Reply Form
   ========================================================================== */

.fa-reply-section {
	margin-top: 28px;
}

.fa-reply-form-wrap {
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-lg);
	overflow: hidden;
	box-shadow: var(--fa-shadow-sm);
}

.fa-reply-form-wrap h3,
.fa-reply-form-wrap .fa-reply-form__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--fa-header-bg);
	padding: 18px 24px 0;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.fa-reply-form-wrap h3 .dashicons {
	color: var(--fa-primary);
}

/* Editor toolbar */
.fa-editor-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--fa-gray-border);
	background: var(--fa-bg);
	flex-wrap: wrap;
}

.fa-editor-toolbar__btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--fa-radius-sm);
	cursor: pointer;
	color: var(--fa-gray);
	font-size: 14px;
	transition: background var(--fa-transition), color var(--fa-transition);
}

.fa-editor-toolbar__btn:hover {
	background: var(--fa-primary-light);
	color: var(--fa-primary-dark);
}

.fa-editor-toolbar__sep {
	width: 1px;
	height: 20px;
	background: var(--fa-gray-border);
	margin: 0 4px;
}

/* Textarea */
.fa-reply-form__textarea {
	width: 100%;
	min-height: 140px;
	border: none;
	outline: none;
	resize: vertical;
	padding: 18px 22px;
	font-size: 15px;
	font-family: var(--fa-font);
	color: var(--fa-gray);
	line-height: 1.65;
	background: var(--fa-white);
	display: block;
}

.fa-reply-form__textarea::placeholder {
	color: var(--fa-gray-light);
}

/* Form footer */
.fa-reply-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	border-top: 1px solid var(--fa-gray-border);
	background: var(--fa-bg);
	gap: 12px;
	flex-wrap: wrap;
}

.fa-reply-form__hint {
	font-size: 12px;
	color: var(--fa-gray-light);
}

/* ==========================================================================
   Login-to-Reply CTA
   ========================================================================== */

.fa-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	border-radius: var(--fa-radius-lg);
	border: 1.5px solid;
	font-size: 15px;
}

.fa-notice--info {
	background: linear-gradient(135deg, var(--fa-primary-light) 0%, rgba(255,255,255,0.9) 100%);
	border-color: rgba(93,190,66,0.40);
	color: var(--fa-gray);
}

.fa-notice--info .dashicons {
	color: var(--fa-primary);
	font-size: 22px;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 1px;
}

.fa-notice--warning {
	background: #FFFBEB;
	border-color: rgba(245,158,11,0.40);
	color: var(--fa-gray);
}

.fa-notice--warning .dashicons {
	color: var(--fa-warning);
	font-size: 22px;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.fa-notice p {
	margin: 0;
	line-height: 1.55;
}

.fa-notice .fa-link {
	color: var(--fa-primary-dark);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(93,190,66,0.4);
	text-underline-offset: 2px;
}

.fa-notice .fa-link:hover {
	color: var(--fa-primary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.fa-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px 0 8px;
	flex-wrap: wrap;
}

.fa-pagination a,
.fa-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: var(--fa-radius);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--fa-font);
	text-decoration: none;
	transition: all var(--fa-transition);
	border: 1.5px solid var(--fa-gray-border);
	background: var(--fa-white);
	color: var(--fa-gray);
}

.fa-pagination a:hover {
	background: var(--fa-primary-light);
	border-color: var(--fa-primary);
	color: var(--fa-primary-dark);
	text-decoration: none;
}

.fa-pagination .fa-pagination__current,
.fa-pagination span.current {
	background: var(--fa-primary);
	border-color: var(--fa-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(93,190,66,0.30);
}

.fa-pagination__prev,
.fa-pagination__next {
	padding: 0 16px;
	font-size: 13px;
}

.fa-pagination__prev .dashicons,
.fa-pagination__next .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.fa-pagination__dots {
	color: var(--fa-gray-light);
	border-color: transparent;
	background: transparent;
	pointer-events: none;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.fa-empty {
	text-align: center;
	padding: 56px 32px;
	color: var(--fa-gray-light);
}

.fa-empty .dashicons {
	font-size: 52px;
	width: 52px;
	height: 52px;
	color: var(--fa-gray-border);
	display: block;
	margin: 0 auto 16px;
}

.fa-empty p {
	font-size: 16px;
	margin: 0;
}

.fa-empty--sm {
	padding: 28px 16px;
}

.fa-empty--sm .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.fa-empty--sm p {
	font-size: 14px;
}

/* ==========================================================================
   Search Results
   ========================================================================== */

.fa-search-results-heading {
	font-size: 18px;
	font-weight: 700;
	color: var(--fa-header-bg);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--fa-gray-border);
}

.fa-search-results-heading strong {
	color: var(--fa-primary-dark);
}

.fa-search-result {
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-left: 3px solid var(--fa-primary);
	border-radius: 0 var(--fa-radius) var(--fa-radius) 0;
	padding: 18px 22px;
	margin-bottom: 10px;
	box-shadow: var(--fa-shadow-xs);
	transition: box-shadow var(--fa-transition), transform var(--fa-transition);
}

.fa-search-result:hover {
	box-shadow: var(--fa-shadow-sm);
	transform: translateX(2px);
}

.fa-search-result__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--fa-header-bg);
	margin: 0 0 6px;
}

.fa-search-result__title a {
	color: inherit;
	text-decoration: none;
}

.fa-search-result__title a:hover {
	color: var(--fa-primary-dark);
}

.fa-search-result__excerpt {
	font-size: 14px;
	color: var(--fa-gray-light);
	margin: 0 0 8px;
	line-height: 1.55;
}

.fa-search-result__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fa-gray-light);
	flex-wrap: wrap;
}

.fa-search-result__meta .dashicons {
	font-size: 13px;
	width: 13px;
	height: 13px;
	color: var(--fa-primary);
}

.fa-search-result__sep {
	color: var(--fa-gray-border);
}

/* ==========================================================================
   Modal
   ========================================================================== */

.fa-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(44,44,44,0.55);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.fa-modal {
	background: var(--fa-white);
	border-radius: var(--fa-radius-lg);
	padding: 32px;
	max-width: 480px;
	width: 90%;
	box-shadow: var(--fa-shadow-lg);
	animation: fa-modal-in 0.22s ease;
}

@keyframes fa-modal-in {
	from { opacity: 0; transform: scale(0.95) translateY(-10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.fa-modal__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--fa-header-bg);
	margin: 0 0 12px;
}

.fa-modal__body {
	font-size: 15px;
	color: var(--fa-gray);
	line-height: 1.6;
	margin: 0 0 24px;
}

.fa-modal__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ==========================================================================
   Toast / Notification
   ========================================================================== */

.fa-toast {
	position: fixed;
	bottom: 28px;
	right: 28px;
	background: var(--fa-header-bg);
	color: #fff;
	padding: 14px 22px;
	border-radius: var(--fa-radius-lg);
	font-size: 14px;
	font-weight: 500;
	font-family: var(--fa-font);
	box-shadow: var(--fa-shadow-lg);
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 360px;
	animation: fa-toast-in 0.22s ease;
	border-left: 4px solid var(--fa-primary);
}

@keyframes fa-toast-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fa-toast--success {
	border-left-color: var(--fa-primary);
}

.fa-toast--error {
	border-left-color: var(--fa-danger);
}

.fa-toast--warning {
	border-left-color: var(--fa-warning);
}

/* ==========================================================================
   Misc utilities
   ========================================================================== */

.fa-link {
	color: var(--fa-primary-dark);
	text-decoration: underline;
	text-decoration-color: rgba(93,190,66,0.40);
	text-underline-offset: 2px;
	font-weight: 500;
	transition: color var(--fa-transition);
}

.fa-link:hover {
	color: var(--fa-primary);
}

.fa-text-muted {
	color: var(--fa-gray-light);
}

.fa-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Star Rating (Encuesta de Estrellas)
   ========================================================================== */

.fa-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding: 14px 20px;
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius);
	margin: 20px 0 4px;
}

.fa-rating__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fa-gray);
	white-space: nowrap;
}

.fa-rating__label .dashicons {
	color: #f5a623;
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.fa-rating__stars {
	display: flex;
	gap: 2px;
	line-height: 1;
}

.fa-rating__star {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px 3px;
	font-size: 24px;
	line-height: 1;
	color: #d0d0d0;
	transition: color 0.12s ease, transform 0.1s ease;
}

.fa-rating__star:not(:disabled):hover {
	transform: scale(1.15);
}

.fa-rating__star:disabled {
	cursor: default;
}

.fa-rating__star--active {
	color: #f5a623;
}

.fa-rating__star--hover {
	color: #f5a623;
}

.fa-rating__summary {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
}

.fa-rating__avg {
	font-weight: 700;
	font-size: 18px;
	color: #f5a623;
	line-height: 1;
}

.fa-rating__count {
	color: var(--fa-gray-light);
	font-size: 12px;
}

.fa-rating__login-note {
	font-size: 12px;
	color: var(--fa-gray-light);
	white-space: nowrap;
}

.fa-rating__your-vote {
	font-size: 12px;
	color: var(--fa-gray-light);
	font-style: italic;
}

/* ==========================================================================
   Adjuntos en formulario de respuesta
   ========================================================================== */

.fa-reply-form__attachment {
	margin-top: 10px;
}

.fa-attachment-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 13px;
	color: var(--fa-gray);
	padding: 7px 14px;
	border: 1px dashed var(--fa-gray-border);
	border-radius: var(--fa-radius-sm);
	transition: border-color var(--fa-transition), color var(--fa-transition);
	user-select: none;
}

.fa-attachment-label:hover {
	border-color: var(--fa-primary);
	color: var(--fa-primary);
}

.fa-attachment-label .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.fa-attachment-hint {
	font-size: 11px;
	color: var(--fa-gray-light);
	margin-left: 2px;
}

.fa-reply-form__file {
	display: none;
}

.fa-attachment-preview {
	margin-top: 8px;
}

.fa-attachment-preview__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: var(--fa-bg);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-sm);
	font-size: 12px;
	color: var(--fa-gray);
	max-width: 100%;
}

.fa-attachment-preview__item .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--fa-primary);
}

.fa-attachment-preview__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--fa-danger);
	padding: 0;
	margin-left: 4px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.fa-attachment-preview__remove .dashicons {
	color: var(--fa-danger);
}

/* ==========================================================================
   Adjuntos en respuesta (display)
   ========================================================================== */

.fa-reply__attachments {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--fa-gray-border);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fa-attachment {
	display: inline-block;
	max-width: 100%;
}

.fa-attachment__image-link {
	display: inline-block;
}

.fa-attachment__image {
	max-width: 100%;
	max-height: 320px;
	border-radius: var(--fa-radius-sm);
	display: block;
	border: 1px solid var(--fa-gray-border);
}

.fa-attachment__file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--fa-bg);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-sm);
	color: var(--fa-gray);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: border-color var(--fa-transition), color var(--fa-transition);
}

.fa-attachment__file:hover {
	border-color: var(--fa-primary);
	color: var(--fa-primary);
	text-decoration: none;
}

.fa-attachment__file .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--fa-danger);
}

.fa-attachment__name {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fa-attachment__size {
	color: var(--fa-gray-light);
	font-size: 11px;
	white-space: nowrap;
}

/* ==========================================================================
   Badge de Encuesta en lista de temas
   ========================================================================== */

.fa-badge--poll {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: #4f46e5;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: var(--fa-radius-pill);
	vertical-align: middle;
	white-space: nowrap;
}

.fa-badge--poll .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   Widget de Encuesta (Poll) en vista de tema
   ========================================================================== */

.fa-poll {
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius-lg);
	padding: 20px 24px;
	margin: 20px 0;
}

.fa-poll__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #4f46e5;
	margin: 0 0 16px;
}

.fa-poll__heading .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Formulario de votación */
.fa-poll__form {}

.fa-poll__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.fa-poll__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 2px solid var(--fa-gray-border);
	border-radius: var(--fa-radius);
	cursor: pointer;
	transition: border-color var(--fa-transition), background var(--fa-transition);
	font-size: 14px;
	font-weight: 500;
	color: var(--fa-gray);
}

.fa-poll__option:hover {
	border-color: #4f46e5;
	background: #f5f3ff;
}

.fa-poll__option input[type="radio"] {
	accent-color: #4f46e5;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.fa-poll__option input[type="radio"]:checked + .fa-poll__option-text {
	color: #4f46e5;
	font-weight: 600;
}

.fa-poll__vote-btn {
	background: #4f46e5 !important;
	border-color: #4f46e5 !important;
}

.fa-poll__vote-btn:hover {
	background: #4338ca !important;
}

/* Resultados */
.fa-poll__results {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fa-poll__result-row {
	display: grid;
	grid-template-columns: 1fr 2fr auto;
	align-items: center;
	gap: 10px;
}

.fa-poll__result-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fa-gray);
}

.fa-poll__result-row--voted .fa-poll__result-label {
	color: #4f46e5;
	font-weight: 600;
}

.fa-poll__result-label .dashicons {
	color: #4f46e5;
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.fa-poll__bar-wrap {
	background: var(--fa-gray-border);
	border-radius: var(--fa-radius-pill);
	height: 10px;
	overflow: hidden;
}

.fa-poll__bar {
	height: 100%;
	background: #4f46e5;
	border-radius: var(--fa-radius-pill);
	transition: width 0.5s ease;
	min-width: 2px;
}

.fa-poll__result-row--voted .fa-poll__bar {
	background: #4f46e5;
}

.fa-poll__result-row--chosen .fa-poll__bar {
	background: #16a34a;
}

.fa-poll__result-row--chosen .fa-poll__result-label {
	font-weight: 600;
}

.fa-poll__chosen-mark {
	color: #16a34a;
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.fa-poll__total {
	font-size: 0.82rem;
	color: var(--fa-text-muted);
	margin: 0 0 10px;
}

.fa-poll__result-stats {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.fa-poll__pct {
	font-size: 13px;
	font-weight: 700;
	color: #4f46e5;
	min-width: 36px;
	text-align: right;
}

.fa-poll__votes {
	font-size: 11px;
	color: var(--fa-gray-light);
}

.fa-poll__total {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--fa-gray-light);
	border-top: 1px solid var(--fa-gray-border);
	padding-top: 10px;
}

.fa-poll__login,
.fa-poll__closed-note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--fa-gray-light);
}

/* Responsive */
@media (max-width: 600px) {
	.fa-poll__result-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.fa-poll__result-stats {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   Mensajes Directos – Hero inbox button
   ========================================================================== */

.fa-hero__inbox-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	background: rgba(255,255,255,0.15);
	border: 1.5px solid rgba(255,255,255,0.5);
	border-radius: var(--fa-radius-pill);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--fa-transition);
	position: relative;
	white-space: nowrap;
}
.fa-hero__inbox-btn:hover {
	background: rgba(255,255,255,0.28);
	color: #fff;
}
.fa-hero__inbox-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--fa-danger);
	color: #fff;
	border-radius: var(--fa-radius-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Categoria header – botón de mensaje al orador */
.fa-category-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.fa-category-header__content { flex: 1 1 auto; }
.fa-category-header__msg-btn {
	flex-shrink: 0;
	margin-top: 4px;
}

/* Header inbox button */
.fa-header-inbox-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	background: rgba(255,255,255,0.15);
	transition: background var(--fa-transition);
}
.fa-header-inbox-btn:hover {
	background: rgba(255,255,255,0.3);
	text-decoration: none;
	color: #fff;
}
.fa-header-inbox-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}
.fa-header-inbox-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--fa-danger);
	color: #fff;
	border-radius: var(--fa-radius-pill);
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1.5px solid var(--fa-header-bg);
}

/* ==========================================================================
   Bandeja de entrada (Inbox)
   ========================================================================== */

.fa-inbox {
	max-width: 680px;
}
.fa-inbox__header {
	margin-bottom: 18px;
}
.fa-inbox__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--fa-gray);
	margin: 0;
}
.fa-inbox__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fa-inbox__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius);
	text-decoration: none;
	color: inherit;
	transition: background var(--fa-transition), box-shadow var(--fa-transition);
}
.fa-inbox__item:hover {
	background: var(--fa-primary-light);
	box-shadow: var(--fa-shadow-sm);
	text-decoration: none;
}
.fa-inbox__item--unread {
	border-left: 3px solid var(--fa-primary);
}
.fa-inbox__avatar-wrap {
	position: relative;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
}
.fa-inbox__avatar-wrap img {
	border-radius: 50%;
}
.fa-inbox__unread-dot {
	position: absolute;
	bottom: 1px;
	right: 1px;
	width: 10px;
	height: 10px;
	background: var(--fa-primary);
	border-radius: 50%;
	border: 2px solid var(--fa-white);
}
.fa-inbox__body { min-width: 0; }
.fa-inbox__name-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}
.fa-inbox__name {
	font-weight: 600;
	font-size: 14px;
	color: var(--fa-gray);
}
.fa-inbox__category {
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: var(--fa-radius-pill);
	background: var(--fa-primary-light);
	color: var(--fa-primary-dark);
}
.fa-inbox__preview {
	margin: 0;
	font-size: 13px;
	color: var(--fa-gray-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fa-inbox__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}
.fa-inbox__date {
	font-size: 11px;
	color: var(--fa-gray-light);
}
.fa-inbox__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--fa-primary);
	color: #fff;
	border-radius: var(--fa-radius-pill);
	font-size: 11px;
	font-weight: 700;
}

/* ==========================================================================
   Vista de conversación
   ========================================================================== */

.fa-conversation {
	display: flex;
	flex-direction: column;
	max-width: 680px;
	height: 70vh;
	min-height: 400px;
	max-height: 720px;
}

/* Cabecera */
.fa-conversation__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-radius: var(--fa-radius) var(--fa-radius) 0 0;
	flex-shrink: 0;
}
.fa-conversation__header img {
	border-radius: 50%;
}
.fa-conversation__header-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fa-conversation__other-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--fa-gray);
}
.fa-conversation__cat-label {
	font-size: 12px;
	color: var(--fa-gray-light);
	display: flex;
	align-items: center;
	gap: 4px;
}
.fa-conversation__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fa-primary-dark);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: var(--fa-radius-sm);
	transition: background var(--fa-transition);
	flex-shrink: 0;
}
.fa-conversation__back:hover {
	background: var(--fa-primary-light);
	text-decoration: none;
}

/* Lista de mensajes */
.fa-conversation__messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	background: #f8f9fa;
	border-left: 1px solid var(--fa-gray-border);
	border-right: 1px solid var(--fa-gray-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fa-conversation__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	color: var(--fa-gray-light);
}
.fa-conversation__empty .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
}

/* Burbujas */
.fa-message {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 75%;
}
.fa-message--mine {
	align-self: flex-end;
	flex-direction: row-reverse;
}
.fa-message--theirs {
	align-self: flex-start;
}
.fa-message__avatar img {
	border-radius: 50%;
}
.fa-message__bubble {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.fa-message--mine .fa-message__bubble {
	align-items: flex-end;
}
.fa-message__content {
	margin: 0;
	padding: 9px 13px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.fa-message--mine .fa-message__content {
	background: var(--fa-primary);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.fa-message--theirs .fa-message__content {
	background: var(--fa-white);
	color: var(--fa-gray);
	border: 1px solid var(--fa-gray-border);
	border-bottom-left-radius: 4px;
}
.fa-message__time {
	font-size: 11px;
	color: var(--fa-gray-light);
	padding: 0 4px;
}

/* Formulario de respuesta */
.fa-message-form {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--fa-white);
	border: 1px solid var(--fa-gray-border);
	border-top: none;
	border-radius: 0 0 var(--fa-radius) var(--fa-radius);
	overflow: hidden;
	flex-shrink: 0;
}
.fa-message-form__textarea {
	resize: none;
	border: none;
	padding: 12px 16px;
	font-size: 14px;
	font-family: var(--fa-font);
	color: var(--fa-gray);
	outline: none;
	background: var(--fa-white);
	min-height: 72px;
}
.fa-message-form__textarea:focus {
	background: #fafffe;
}
.fa-message-form__footer {
	display: flex;
	justify-content: flex-end;
	padding: 8px 12px;
	border-top: 1px solid var(--fa-gray-border);
	background: #fafafa;
}
.fa-message-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

/* Responsive inbox/conversation */
@media (max-width: 600px) {
	.fa-inbox__item {
		grid-template-columns: auto 1fr;
	}
	.fa-inbox__meta {
		display: none;
	}
	.fa-conversation {
		height: 80vh;
	}
	.fa-message {
		max-width: 90%;
	}
}