/**** I will group them all separately to make it more clear what is being edited. ****/

/**********============== PHONE STYLES ==============**********/

@media screen and (max-width: 767px) {
    
    /* Flex layout: stack forums and sidebar */
    .index-wrapper {
        flex-direction: column;
    }

    .forums,
    .sidebar {
        width: 100%;
        float: none;
        margin: 0;
        box-sizing: border-box;
    }

    /* Sidebar Tables: Fix stretching and alignment issues */
    .sidebar table {
        display: block;            /* Forces the table to behave like a block-level element */
        width: 100% !important;   /* Full width of the sidebar */
        box-sizing: border-box;   /* Prevent overflow from padding or borders */
        margin: 0;
		background: var(--mainboard-bg) !important;
		padding-bottom: 0.5rem;
    }

    .sidebar table tbody,
    .sidebar table tr,
    .sidebar table td {
        display: block;            /* Stack rows and cells */
        width: 100%;               /* Each cell takes full width */
        box-sizing: border-box;    /* Include padding/border in width */
		
    }

    columns {
    display: block;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    }
}


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

@media (max-width: 767px) {
  #backtop,
  .backbottom {
    display: none !important;
  }
}

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

	
     /* Stack the main siteinfobox grid into one column */
    #siteinfobox {
        grid-template-columns: 1fr; /* Single column */
        grid-template-areas:
            "summary"
            "staff"
            "news";
    }

    /* Adjust inner padding for mobile friendliness */
    #sitesummary,
    #sitestaff,
    #sitenews {
        padding: 0.5rem 1rem; /* less padding on sides */
    }

    /* Ensure staff images are centered and wrap nicely */
    #stafflist {
        justify-content: center; /* center staff thumbnails */
    }

    /* Slightly reduce staff thumbnails for mobile */
    #sitestaff .imgthumb {
        width: 90px;
        height: auto;
    }

    #sitestaff .imgthumb img {
        width: 100px;
        height: auto;
    }

    /* Footer adjustment if needed */
    #at-a-glance-footer {
        /* flex-direction: column; */
        align-items: center;
        padding: 0.5rem;
    }

    .wrapper {
        padding: 15px 0; /* set back to 'padding: 15px' if you wanna revert it to how it was */
    }
	
	
	
/***** OOC Forum Styling *****/
 .ooc-forumrows {
    grid-template-columns: 1fr;
  }
	

/***** IC Forum Styling *****/
	.icBoard-alt-title {
		font-size: 1.9em;
	}

    #sideboxes { /* example, depends on your HTML ID */
        display: flex;
        flex-direction: column;
    }
	
	table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }
	
	#footer .lower {
		font-size: 10px;
	}
}

/********** POSTS ************/
@media screen and (max-width: 767px) {
   .post.classic {
      display: flex;
      flex-direction: column;
    }
	
    .post.classic .post_author {
        width: -webkit-fill-available;
        border-right: none;
        border-bottom: 1px solid #363636;
        float: none;
		width: 100% !important;
    }

    .post.classic .post_content {
        width: -webkit-fill-available;
        border-left: none;
        flex-grow: 1;
        min-height: unset;
        float: none;
		width: 100% !important;
    }

    .post.classic > .mini-prof {
      min-width: unset;
      max-width: unset;
      width: 100%;
    }
	
	.post.classic > .mini-prof > .buffer {
  padding: 0.5rem;
	}

    .post .post_author div.author_avatar {
        max-width: 100%;
    }

    .post .post_author div.author_statistics .postbit_row {
        flex-direction: column; /* stack postbit rows */
		 justify-content: center;
    }
	
	.postbit_left {
		text-align: center;
    }
}


/*==================== MOBILE PROFILES HERE ====================*/

@media screen and (max-width: 767px) {
	
	.main-profile-mgroup-container {
        	display: grid;
        	grid-template-columns: 1fr;
		grid-template-areas: 
        	"mgroupDeets"
        	"mgroupDesc";
    }
	
	.main-profile-personality-container {
        	display: grid;
        	grid-template-columns: 1fr;
		grid-template-areas: 
        	"personalityDeets"
        	"personalityDesc";
    }

}


/******* MOBILE GUIDEBOOK HERE *******/


/******* MOBILE WHO'S WHO HERE *******/



/*==================== TABLET STYLES ====================*/

/* Tablets - 768px to 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #siteinfo_box {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "summary summary"
            "groups updates";
    }
	
/***** OOC Forum Styling *****/
 .ooc-forumrows {
    grid-template-columns: 1fr 1fr;
  }
}





/**********============== DESKTOP STYLES ==============**********/
/* Desktop - 1024px and above  */
@media screen and (min-width: 1024px) {
    /* keep existing layout */
}