/**
 * Foro Academia – Responsive Styles
 * Academia Contralores brand · supports 320px – ∞
 * Breakpoints: 1024px | 768px | 600px | 480px | 360px
 */

/* ==========================================================================
   Large Desktop tweak (1200px+): let the layout breathe
   ========================================================================== */

@media screen and (min-width: 1200px) {
	.fa-forum {
		padding: 32px 0 56px;
	}
}

/* ==========================================================================
   Tablet landscape (1024px and below)
   ========================================================================== */

@media screen and (max-width: 1024px) {

	/* Collapse the header search a little */
	.fa-forum-header__search {
		max-width: 320px;
	}

	/* Forum container */
	.fa-forum {
		padding: 22px 20px 40px;
		max-width: 100%;
	}

	/* Category card stats: allow wrapping */
	.fa-category-card__stats {
		gap: 16px;
	}

	/* Topic list: hide activity column */
	.fa-topic-list__header {
		grid-template-columns: 1fr 110px 90px;
	}

	.fa-topic-list__col--activity {
		display: none;
	}

	.fa-topic-row {
		grid-template-columns: 1fr 110px 90px;
	}

	.fa-topic-row__activity {
		display: none;
	}
}

/* ==========================================================================
   Tablet portrait (768px and below)
   ========================================================================== */

@media screen and (max-width: 768px) {

	/* ── Header ── */
	.fa-forum-header {
		height: auto;
		min-height: 58px;
		position: sticky;
		top: 0;
	}

	.fa-forum-header__inner {
		flex-wrap: wrap;
		padding: 10px 16px;
		gap: 10px;
		min-height: 58px;
	}

	/* Hide site name text; keep logo */
	.fa-forum-header__site-name {
		display: none;
	}

	.fa-forum-header__logo {
		height: 36px;
	}

	/* Search: full-width second row */
	.fa-forum-header__search {
		order: 3;
		max-width: 100%;
		width: 100%;
		flex: 0 0 100%;
	}

	.fa-header-search__input {
		padding: 9px 14px;
		font-size: 13px;
	}

	.fa-header-search__btn {
		height: 36px;
		padding: 0 14px;
		font-size: 14px;
	}

	/* User controls: right side of first row */
	.fa-forum-header__user {
		margin-left: auto;
	}

	.fa-header-username {
		display: none;          /* avatar will be enough on small screens */
	}

	.fa-header-btn {
		padding: 7px 14px;
		font-size: 12px;
	}

	/* ── Nav bar ── */
	.fa-forum-nav {
		height: 36px;
	}

	.fa-forum-nav__inner {
		padding: 0 16px;
	}

	.fa-forum-nav__label {
		font-size: 12px;
	}

	/* ── Forum container ── */
	.fa-forum {
		padding: 16px 14px 36px;
		font-size: 14px;
	}

	/* ── Breadcrumbs ── */
	.fa-breadcrumbs {
		padding: 8px 0 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.fa-breadcrumbs__list {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	/* ── Search bar (inline) ── */
	.fa-search-bar__form {
		flex-direction: column;
		border-radius: var(--fa-radius);
	}

	.fa-search-bar__btn {
		width: 100%;
		justify-content: center;
		height: 46px;
		border-radius: 0;
	}

	/* ── Category cards ── */
	.fa-category-card__main {
		padding: 18px 18px 12px;
		gap: 14px;
	}

	.fa-category-card__icon {
		width: 42px;
		height: 42px;
	}

	.fa-category-card__icon .dashicons {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	.fa-category-card__title {
		font-size: 17px;
	}

	.fa-category-card__stats {
		padding: 10px 18px;
		gap: 14px;
	}

	.fa-category-card__stat-value {
		font-size: 19px;
	}

	.fa-category-card__activity {
		padding: 9px 18px;
	}

	/* ── Category header ── */
	.fa-category-header {
		padding: 18px 20px;
	}

	.fa-category-header__title {
		font-size: 22px;
	}

	/* ── Topic list ── */
	.fa-topic-list__header {
		grid-template-columns: 1fr 80px;
		padding: 10px 16px;
	}

	.fa-topic-list__col--views,
	.fa-topic-list__col--activity {
		display: none;
	}

	.fa-topic-row {
		grid-template-columns: 1fr 80px;
		padding: 14px 16px;
		gap: 10px;
	}

	.fa-topic-row__activity {
		display: none;
	}

	.fa-topic-row__count--views {
		display: none;
	}

	.fa-topic-row__avatar {
		display: none;
	}

	.fa-topic-row__title {
		font-size: 14px;
	}

	/* ── Topic view ── */
	.fa-topic__header {
		padding: 20px 20px 16px;
	}

	.fa-topic__title {
		font-size: 20px;
	}

	.fa-topic__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.fa-topic__info {
		flex-wrap: wrap;
		gap: 10px;
		font-size: 12px;
	}

	.fa-topic__content {
		padding: 18px 20px;
	}

	/* ── Moderation toolbar ── */
	.fa-moderation {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 12px 16px;
	}

	.fa-mod-pin,
	.fa-mod-close,
	.fa-moderation .fa-btn--sm {
		width: 100%;
		justify-content: center;
	}

	/* ── Replies ── */
	.fa-reply {
		padding: 16px 16px;
		gap: 12px;
	}

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

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

	.fa-reply__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.fa-reply__actions {
		margin-top: 4px;
	}

	/* ── Reply form ── */
	.fa-reply-form-wrap {
		border-radius: var(--fa-radius);
	}

	.fa-reply-form__textarea {
		min-height: 110px;
		padding: 14px 16px;
	}

	.fa-reply-form__footer {
		flex-direction: column;
		align-items: stretch;
		padding: 12px 16px;
	}

	.fa-reply-form__footer .fa-btn {
		width: 100%;
		justify-content: center;
	}

	/* ── Pagination ── */
	.fa-pagination a,
	.fa-pagination span {
		min-width: 34px;
		height: 34px;
		font-size: 13px;
	}

	/* ── Stats bar ── */
	.fa-stats-bar {
		gap: 16px;
		padding: 10px 16px;
	}

	/* ── Subcategory chips ── */
	.fa-subcategory-chip {
		padding: 7px 14px;
		font-size: 13px;
	}

	/* ── Modal ── */
	.fa-modal {
		padding: 24px 20px;
		width: 95%;
	}

	/* ── Toast ── */
	.fa-toast {
		bottom: 16px;
		right: 16px;
		left: 16px;
		max-width: none;
	}
}

/* ==========================================================================
   Small tablet / large phone (600px and below)
   ========================================================================== */

@media screen and (max-width: 600px) {

	/* Header: stack brand above search */
	.fa-forum-header__inner {
		padding: 8px 12px;
	}

	.fa-forum-header__logo {
		height: 32px;
	}

	/* Stats bar: wrap items */
	.fa-stats-bar {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* Topic list: tighter */
	.fa-topic-row__meta {
		font-size: 11px;
	}

	/* Topic title heading */
	.fa-topic__title {
		font-size: 18px;
	}

	/* Reply sidebar hidden – save space */
	.fa-reply__sidebar {
		display: none;
	}
}

/* ==========================================================================
   Mobile (480px and below)
   ========================================================================== */

@media screen and (max-width: 480px) {

	/* ── Header ── */
	.fa-forum-header {
		min-height: 52px;
	}

	.fa-forum-header__inner {
		gap: 8px;
		padding: 8px 12px;
	}

	.fa-forum-header__logo {
		height: 28px;
	}

	/* ── Forum container ── */
	.fa-forum {
		padding: 12px 10px 28px;
		font-size: 13px;
	}

	/* ── Buttons: touch-friendly ── */
	.fa-btn {
		padding: 12px 20px;
		font-size: 14px;
		min-height: 44px;
	}

	.fa-btn--sm {
		padding: 9px 14px;
		min-height: 38px;
	}

	/* ── Category cards ── */
	.fa-category-card__stats {
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px 14px;
	}

	.fa-category-card__stat {
		min-width: 52px;
	}

	.fa-category-card__subcategories {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ── Topic list: single column ── */
	.fa-topic-list__header {
		display: none;
	}

	.fa-topic-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.fa-topic-row__stats {
		display: flex;
		gap: 12px;
	}

	/* ── Topic content ── */
	.fa-topic__content {
		padding: 14px 14px;
		font-size: 14px;
	}

	.fa-topic__content pre {
		font-size: 12px;
		padding: 14px 16px;
	}

	/* ── Replies: minimal nesting ── */
	.fa-reply {
		padding: 14px 12px;
	}

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

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

	.fa-reply__content {
		font-size: 13px;
	}

	.fa-reply-action {
		padding: 6px 10px;
		min-height: 36px;
		font-size: 11px;
	}

	/* ── Editor toolbar ── */
	.fa-editor-toolbar {
		padding: 6px 10px;
	}

	.fa-editor-toolbar__btn {
		width: 38px;
		height: 38px;
	}

	/* ── Pagination ── */
	.fa-pagination {
		flex-wrap: wrap;
		gap: 5px;
	}

	.fa-pagination a,
	.fa-pagination span {
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.fa-pagination__prev,
	.fa-pagination__next {
		padding: 0 10px;
		font-size: 12px;
	}

	/* ── Breadcrumbs: scrollable row ── */
	.fa-breadcrumbs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.fa-breadcrumbs__list::-webkit-scrollbar {
		display: none;
	}

	.fa-breadcrumbs__item {
		white-space: nowrap;
	}

	/* ── Search results ── */
	.fa-search-result__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.fa-search-result__sep {
		display: none;
	}

	/* ── Modal ── */
	.fa-modal__actions {
		flex-direction: column;
	}

	.fa-modal__actions .fa-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Tiny phone (360px and below)
   ========================================================================== */

@media screen and (max-width: 360px) {

	.fa-forum-header__inner {
		padding: 7px 10px;
	}

	.fa-forum-header__logo {
		height: 24px;
	}

	.fa-header-btn {
		padding: 6px 10px;
		font-size: 11px;
	}

	.fa-forum {
		padding: 10px 8px 24px;
	}

	.fa-category-card__main {
		padding: 14px 12px 10px;
		gap: 10px;
	}

	.fa-category-card__title {
		font-size: 15px;
	}

	.fa-topic__title {
		font-size: 16px;
	}

	.fa-reply {
		padding: 12px 10px;
	}

	.fa-reply__content {
		font-size: 12px;
	}

	.fa-reply-form__textarea {
		min-height: 90px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {

	.fa-forum-header,
	.fa-forum-nav,
	.fa-moderation,
	.fa-reply-section,
	.fa-pagination,
	.fa-header-search {
		display: none !important;
	}

	.fa-forum {
		max-width: 100%;
		padding: 0;
		font-size: 12pt;
	}

	.fa-topic__content,
	.fa-reply__content {
		color: #000;
	}

	.fa-reply--nested {
		margin-left: 20pt;
	}
}