/***************************

M1. Category Display

Also applies to "category" page

****************************/

.category-container {
    margin: var(--spacing-large) 0;
	padding-bottom: var(--spacing-large);
}

/***************************

M2. Forum Display

Also applies to subforum page

****************************/

.forums-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--spacing-large);
}

.forum-container {
	display: grid;
	background-color: rgba(var(--color2light));
	margin: var(--spacing-medium) 0;
	grid-template-columns: 1fr;
	grid-template-areas: 'forum-signal'
		'title'
		'forum-stats'
		'desc'
		'subforums'
		'lastpost';
	align-items: center;
	box-shadow: var(--box-shadow);
	grid-column-gap: 1rem;
	max-width: 400px;
	margin: auto;
	width: 100%;
	padding: var(--spacing-medium);
	margin-bottom: var(--spacing-large);
	border: var(--border-color);
}

.forum-signal {
	grid-area: forum-signal;
	margin: calc(-1 * var(--spacing-medium)) calc(-1 * var(--spacing-medium)) var(--spacing-small);
}

.forum-announcements-wrapper {
	margin-bottom: var(--spacing-medium);
}

.threads,
.posts {
	grid-area: threads;
	align-self: self-end;
	padding: var(--spacing-small);
	background: rgb(var(--color2light));
	margin: var(--spacing-small);
	font-size: var(--font-size-sm);
}

.posts {
	grid-area: posts;
}

.title {
	grid-area: title;
	font-size: var(--font-size-xl);
	padding: var(--spacing-medium) 0;
}

/* 1. THE BASE SHAPE (The "Grid Cell") */
.forum-status {
    /* Dimensions via Variables */
    height: var(--spacing-medium); 
    width: var(--spacing-medium);
    
    /* Layout */
    display: inline-block;
    margin-right: var(--spacing-small);
    
    /* The Academy Look: Sharp & Bordered */
    border-radius: 0 !important;
    border: 0.0625rem solid rgb(var(--color1)); /* 1px Dark Border */
    box-shadow: none !important;
    
    /* Interaction */
    transition: all 0.2s ease;
}

/* 2. NEW POSTS ("The Active File") */
/* Solid block of the User's Chosen Color */
.forum_on {
    background: rgb(var(--color3)) !important;
    border-color: rgb(var(--color3));
}

/* 3. NO NEW POSTS ("The Empty File") */
/* Transparent Wireframe */
.forum_off {
    background: transparent !important;
    /* Subtle grey border to show it exists but is inactive */
    border-color: rgba(var(--color1), 0.3); 
}

/* 4. CLOSED FORUM ("The Redacted File") */
/* Solid Black/Dark Grey - removing the clip-path polygon */
.forum_offclose {
    background: rgb(var(--color1)) !important;
    border-color: rgb(var(--color1));
    opacity: 0.5; /* Faded out to recede visually */
    clip-path: none !important; /* Reset your old shape */
}

/* 5. REDIRECT LINK ("The Dog-Ear / Movement") */
/* Uses a hard diagonal gradient to imply a 'slash' or 'arrow' */
.forum_offlink {
    /* Creates a sharp diagonal line (half transparent, half dark) */
    background: linear-gradient(
        45deg, 
        transparent 50%, 
        rgb(var(--color1)) 50%
    ) !important;
    
    border-color: rgb(var(--color1));
    clip-path: none !important; /* Reset your old arrow shape */
}

.desc {
	grid-area: desc;
	align-self: baseline;
	padding: var(--spacing-medium) 0;
	margin: 0 var(--spacing-medium);
	font-size: var(--font-size-base);
	border-top: 5px double;
    border-bottom: 5px double;
}

.forum-stats {
	grid-area: forum-stats;
	display: flex;
	margin: 0 var(--spacing-small);
	font-family: var(--font3);
}


.subforums {
	grid-area: subforums;
	padding: 0;
	display: flex;
	flex-flow: wrap;
	margin-left: var(--spacing-small);

}

.subforum-item {
	margin: var(--spacing-small);
	font-size: var(--font-size-sm);
}

.lastpost {
	grid-area: lastpost;
	display: grid;
	grid-template-areas:
		'lastpost-title'
		'lastpost-user';
	padding: var(--spacing-medium) 0;
	margin: var(--spacing-medium);

}


.lastpost-title {
	grid-area: lastpost-title;
	padding-bottom: var(--spacing-small);
}

.lastpost-user {
	grid-area: lastpost-user;
	font-size: var(--font-size-sm);
}

.forum-display-subforums {
	margin-top: var(--spacing-large);
}

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

	.forum-container {
		grid-template-areas:'forum-signal forum-signal'
			'title forum-stats'
			'desc desc'
			'subforums subforums'
			'lastpost lastpost';
		max-width: 600px;
		width: unset;
		min-width: initial;
		overflow: hidden;
		margin: unset;
		margin-bottom: var(--spacing-large);
		grid-template-rows: auto 1fr auto; 
	}

	.forums-wrapper,
	.forum-display-subforums {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
        justify-items: stretch;
        align-items: stretch;
        gap: 20px;
        margin: var(--spacing-large);
	}

	.forums-wrapper .forum-container:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.desc {
		border: none;
		border-top: 5px double;
	}

	.desc-inner {
		padding: var(--spacing-small);
	}

	.forum-stats {
		flex-direction: column;
	}

	.threads,
	.posts {
		align-self: auto;
		padding: 0;
		margin: 0;
	}

	.subforums {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.lastpost {
		margin-top: auto;
		border: none;
		border-top: 5px double;
		height: 6rem;
	}

}