/**
 * Mushroom Frontend Styling
 * Feature-specific styles - Profile Badge, Carousels, etc.
 */

/* ============================================
   TABLE OF CONTENTS
   ============================================
   1.  PROFILE BADGE (SHIELD)
   2.  mbl LISTING LAYOUTS (Carousel, grid, etc.)
   3.  RESCUE WILDEBEEST's PAGE
4. GROUP MANAGEMENT PAGE
	5. STYLING by TAG
   ============================================ */

/* ============================================
   PROFILE BADGE - CUSTOM BADGE GRAPHIC
   ============================================ */

/* Wrapper - fixed position on left */
#mushroom-profile-badge-wrapper {
    position: fixed;
    left: 0;
    top: 28%;
    transform: translateY(-50%);
    z-index: 9999;
}

/* Hide it on pages where we don't need it */
/* Hide on Group  management and Import Students & Account Help & Reset Password */
.page-id-8685 #mushroom-profile-badge-wrapper, .page-id-10498 #mushroom-profile-badge-wrapper, .page-id-19308 #mushroom-profile-badge-wrapper, .page-id-19310 #mushroom-profile-badge-wrapper {
	display:none;
}
/* Hide the badge version on profile */
body.page-id-10383 #mushroom-profile-badge-wrapper{
	display:none!important;
}
/* ============================================
   TRIGGER (Small Badge with Avatar)
   ============================================ */

.mushroom-badge-trigger {
    width: 65px;
    height: 75px;
    background-image: var(--badge-img);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Uses drop-shadow to trace PNG silhouette */
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.6));
    transition: transform 0.25s ease, filter 0.25s ease;
    position: relative;
}

.mushroom-badge-trigger:hover {
    transform: scale(1.08);
    filter: drop-shadow(0px 6px 18px rgba(0, 0, 0, 0.85));
}

.mushroom-trigger-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #000;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Hide the trigger icon when the expanded badge is open */
#mushroom-profile-badge-wrapper:has(.mushroom-shield-visible) .mushroom-badge-trigger {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ============================================
   EXPANDED BADGE (Viewport Aware & Scaled)
   ============================================ */

.mushroom-shield-hidden {
    display: none !important;
}

.mushroom-shield-visible {
    display: flex !important;
    animation: mushroomShieldSlideIn 0.3s ease-out;
}

#mushroom-profile-shield {
    position: absolute;
    left: 80px;
    top: 230%;
    transform: translateY(-50%);
    
    /* Responsive Viewport Sizing */
    width: min(400px, 90vw);
    max-height: min(500px, calc(100vh - 40px));
    aspect-ratio: 4 / 5;
    
    background-image: var(--badge-img);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(12px 16px 25px rgba(0, 0, 0, 0.75));
    z-index: 10001;
    box-sizing: border-box;
    
    /* Padding scales down if shield gets smaller than 500px */
    padding: min(25px, 8vh) min(50px, 8vw);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Prevents background escape */
}

/* Close button positioned inside top corner */
.mushroom-close-badge {
    position: absolute;
    top: min(35px, 7.5vh);
    right: min(60px, 8vw);
    font-size: 26px;
    font-weight: bold;
    cursor: pointer;
    color: #111;
    line-height: 1;
    z-index: 2;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mushroom-close-badge:hover {
    color: #e63946;
    transform: scale(1.2);
}

/* Shield Content Container */
.mushroom-shield-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 100%;
    overflow-y: visible;
}

.mushroom-shield-avatar {
    width: min(85px, 14vh);
    height: min(85px, 14vh);
    border-radius: 50%;
    border: 3px solid #111;
    object-fit: cover;
    margin-bottom: min(8px, 1.5vh);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.mushroom-shield-name {
    font-size: min(1.3rem, 3.5vh);
    font-weight: 700;
    margin: 0 0 min(10px, 1vh) 0;
    color: #111111;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.rpg-stats-box-title, .rpg-avatar-container{
	display:none;
}
.rpg-level-display-container{
	text-align: center;
}
.xp-n-lives-display-wrapper{
	box-shadow: 0 1px 2px black;
	border-radius:20px;
	margin-left:40px;
	margin-right:40px;
}
.profile-xp-display {
	padding-top:10px;
}
.profile-xp-display img, .profile-lives-display img{
	padding-left:20px;
	width:70px;
}
.profile-lives-display strong{
	display: block;
	text-align:center;
	padding-bottom:10px;
}
/* Stats box styled cleanly over gold background */
.mushroom-shield-stats {
    width: 100%;
    border-radius: 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
    flex-shrink: 1;
}

.mushroom-shield-stats .stat-item {
    display: flex;
    justify-content: space-between;
    padding: min(5px, 1vh) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mushroom-shield-stats .stat-item:last-child {
    border-bottom: none;
}

.mushroom-shield-stats .stat-label {
    color: #e0e0e0;
}

.mushroom-shield-stats .stat-value {
    color: #ffd700;
    font-weight: 700;
}

/* Menu Actions - Black buttons with white text */
.mushroom-shield-menu {
    position: relative;
    flex-shrink: 0;
}

.mushroom-shield-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
	background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.mushroom-shield-menu-trigger img.emoji {
    width: 1.2em !important;
    height: 1.2em !important;
    margin: 0;
}

/* Hide text label by default */
.mushroom-shield-menu-trigger .trigger-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

/* Reveal text label on hover */
.mushroom-shield-menu-trigger:hover, .mushroom-shield-menu-trigger.active,
.mushroom-shield-menu:has(.mushroom-shield-dropdown.show) .mushroom-shield-menu-trigger {
    background: darkblue;
    color: #ffd700;
    border-color: #ffd700;
}

.mushroom-shield-menu-trigger:hover .trigger-label {
    max-width: 150px; /* Adjust according to text length */
    opacity: 1;
    margin-left: 8px;
}

.mushroom-shield-dropdown {
    display: none;
    list-style: none;
    padding: 6px;
    margin: 6px 0 0 0;
    background: #111111;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
	
	/* Upward Positioning */
    position: absolute;
    bottom: 100%;       /* Positions bottom of menu at top of button */
    left: 0;
	min-width: 180px;            /* Ensures menu stays readable even if parent shrinks */
    width: max-content;          /* Fits content naturally */
    z-index: 10002;     /* Floats above shield graphic and stats */

    /* Scrollbar activation constraints */
    max-height: min(220px, 40vh); /* Caps height relative to screen space */
    overflow-y: auto !important;  /* Forces scrollbar when items exceed max-height */
    box-sizing: border-box;
}
/* Custom scrollbar styling (matches dark theme) */
.mushroom-shield-dropdown::-webkit-scrollbar {
    width: 6px;
}

.mushroom-shield-dropdown::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.mushroom-shield-dropdown::-webkit-scrollbar-thumb {
    background: #ffd700;
    border-radius: 4px;
}

.mushroom-shield-dropdown.show {
    display: block;
}

.mushroom-shield-dropdown li {
    margin: 0;
}

.mushroom-shield-dropdown li a {
    display: block;
    padding: 8px 12px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-radius: 4px;
}

.mushroom-shield-dropdown li a:hover {
    background: #222222;
    color: #ffd700;
}

/* ============================================
   ANIMATIONS & RESPONSIVE
   ============================================ */

@keyframes mushroomShieldSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

@media (max-width: 600px) {
    #mushroom-profile-shield {
        left: 5px;
        width: min(320px, 92vw);
    }
	.profile-xp-display img, .profile-lives-display img {
    padding-left: 10px;
    width: 45px;
}
	#mushroom-profile-shield > div > div.mushroom-shield-stats > div > div.profile-user-stats-container > div.rpg-level-display-container > img {
		width:45px;
	}
	.mushroom-close-badge {
	top: min(16px, 7.5vh);
    right: min(90px, 10vw);	
	}
}

/** ============================================
   2. mbl LISTING LAYOUTS
   ============================================ */
/* ============================================================
   BASE ITEM STYLES (apply to every mbl listing)
   Layout-specific rules below override these.
   ============================================================ */

/* Card shell — shadow, radius, hover language. Shared by all layouts. */
.mbl-post-item {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 5px darkblue;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
	/* Reset any theme list styling that might reach orphaned <li> elements
       inside non-<ul> containers (e.g. the grid layout's <div> wrapper). */
    list-style: none;
    list-style-type: none;
    padding-left: 0;
}
/* Belt-and-braces: kill any bullet drawn via pseudo-elements by the theme. */
.mbl-post-item::marker,
.mbl-post-item::before {
    content: none;
    display: none;
}

.mbl-post-item:hover {
    box-shadow: 0 2px 5px blue;
    background-color: #f0f8ff;
}

/* Link — shared baseline; layouts override direction/padding. */
.mbl-post-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* Text container — shared baseline; layouts override size/alignment. */
.mbl-text {
    min-width: 0;                    /* critical for text wrapping in flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Title — shared baseline; layouts override size/color/clamp. */
.mbl-title {
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Author — shared baseline; layouts override size/alignment. */
.mbl-author {
    font-size: 0.8rem;
    font-style: italic;
    color: #888;
    margin: 0;
    line-height: 1.3;
}
/* The trigger sits below the link */
.mbl-more-posts-trigger {
    width: 100%;
    margin-top: 4px;
    padding-left: 0 !important;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* Stats row inside a MBL card */
.mush-user-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    font-style: normal;
    margin-top: 6px;
}

.mush-user-stats > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 0.9rem;
    color: #555;
}

.mush-user-stats img {
    display: inline-block;
    vertical-align: middle;
}

.mush-user-stats .mush-stat-value {
    font-weight: 600;
    color: #333;
}

/* Activity block on the right of a MBL row */
.mbl-default-list .mbl-activity {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.mbl-activity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    line-height: 1.1;
}

.mbl-activity-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: darkblue;
}

.mbl-activity-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-top: 2px;
}

/* Divider between text and activity block */
.mbl-default-list .mbl-text + .mbl-activity {
    padding-left: 20px;
    border-left: 1px solid #f0f0f0;
}

/* Responsive — stack on narrow screens */
@media (max-width: 600px) {
    .mbl-default-list .mbl-post-link {
        flex-wrap: wrap;
    }
    .mbl-default-list .mbl-activity {
        flex-basis: 100%;
        margin-left: 0;
        margin-top: 10px;
        justify-content: flex-start;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid #f0f0f0;
        padding-top: 10px;
    }
}
/* ============================================================
   DEFAULT LIST — row layout
   ============================================================ */

.mbl-default-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mbl-default-list .mbl-post-item {
    margin: 0 0 15px 0;
}

.mbl-default-list .mbl-post-item:last-child {
    margin-bottom: 0;
}

.mbl-default-list .mbl-post-item:hover {
    transform: translateY(-3px);
}

.mbl-default-list .mbl-post-link {
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    width: 100%;
}

.mbl-default-list .mbl-thumb-wrapper {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 3px;
    background: #f0f0f0;
    line-height: 0;
}

.mbl-default-list .mbl-thumb-wrapper img,
.mbl-default-list .mbl-post-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 3px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}

.mbl-default-list .mbl-text {
    flex: 1 1 auto;
}

.mbl-default-list .mbl-title {
    font-size: 1rem;
    color: darkblue;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbl-default-list .mbl-post-link:hover .mbl-title {
    color: blue;
}

.mbl-default-list .mbl-excerpt {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.5;
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* ============================================================
   MBL CAROUSEL LAYOUT
   Canonical shape (produced by mbl_render_list_item):
     ul.mbl-carousel-layout
       li.mbl-post-item
         a.mbl-post-link
           img.mbl-post-thumb
           span.mbl-title
           span.mbl-author   (optional)
   ============================================================ */

.mbl-carousel-layout {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;                 /* keep the scroll row on one line */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
    margin-bottom: 15px
    /* max-height removed — it was clipping taller cards (2-line titles) */
}

.mbl-carousel-layout ul {
    display: inline-flex;
    gap: 15px;
    padding: 10px 5px;
    margin: 0;
    list-style: none;
    white-space: normal;                 /* let text wrap inside cards */
}

.mbl-carousel-layout li.mbl-post-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 110px;                    /* a touch wider for 2-line titles */
    max-width: 130px;                    /* predictable card width */
    padding: 0;                          /* padding lives on the <a> */
    margin: 10px 8px 15px 8px;              /* matches student-tag bottom spacing */
    background: #fff;
    border-radius: 3px;                  /* matches student-tag-list */
    box-shadow: 0 2px 5px darkblue;      /* matches student-tag-list */
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    vertical-align: top;
    overflow: hidden;                    /* keeps rounded corners clean */
}

.mbl-carousel-layout li.mbl-post-item:hover {
    transform: translateY(-3px);         /* optional lift — drop if you want pure recolor */
    box-shadow: 0 2px 5px blue;          /* matches student-tag-list hover */
    background-color: #f0f8ff;           /* matches student-tag-list hover */
}

.mbl-carousel-layout .mbl-post-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 15px;                       /* the only padding in the card */
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 3px;
}

.mbl-carousel-layout .mbl-post-thumb {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 10%;
    margin: 0 0 8px 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);  /* subtle, matches student-tag img shadow */
}

.mbl-carousel-layout .mbl-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;                 /* override the nowrap from the container */
    overflow-wrap: anywhere;             /* break long words so 2 lines are usable */
    font-size: 0.8rem;
    line-height: 1.25;
    color: #333;
    font-weight: 500;
    margin: 0;
    max-width: 100px;
}

.mbl-carousel-layout .mbl-author {
    font-size: 0.7rem;
    font-style: italic;
    color: #888;
    margin-top: 4px;
    line-height: 1.2;
}

/* ============================================================
   CAROUSEL SHELL — arrows flanking the scroller
   ============================================================ */

.mbl-carousel-shell {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* The scroller itself needs to take the middle space and
   shrink if the shell is narrower than the arrows + content. */
.mbl-carousel-shell .mbl-carousel-layout {
    flex: 1 1 auto;
    min-width: 0;      /* allows the flex item to shrink below content width */
}

/* ============================================================
   CAROUSEL ARROWS — bare CSS triangles (no circle)
   ============================================================ */

.mbl-carousel-arrow {
    flex: 0 0 auto;
    width: 32px;                   /* hit area — larger than the triangle */
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;                  /* no circle border */
    background: transparent;       /* no circle fill */
    color: darkblue;               /* drives the triangle color */
    cursor: pointer;
    user-select: none;
    font-size: 0;                  /* hide any stray text node */
    line-height: 0;
    transition: color 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
	box-shadow: none;
}

.mbl-carousel-arrow:hover {
    color: blue;
	background:transparent;
}

.mbl-carousel-arrow:active {
    transform: scale(0.9);
}

.mbl-carousel-arrow:focus-visible {
    outline: 2px solid darkblue;
    outline-offset: 2px;
    border-radius: 4px;            /* so the focus ring looks like a soft square */
}

/* Shared triangle base */
.mbl-carousel-arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Left-pointing triangle */
.mbl-carousel-arrow--prev::before {
    border-width: 8px 12px 8px 0;
    border-color: transparent currentColor transparent transparent;
    margin-left: -3px;             /* optical centering nudge */
}

/* Right-pointing triangle */
.mbl-carousel-arrow--next::before {
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent currentColor;
    margin-right: -3px;            /* optical centering nudge */
}

/* Hide on touch devices */
@media (hover: none) and (pointer: coarse) and (max-width: 600px) {
    .mbl-carousel-arrow { display: none; }
}

/* Optional: smaller arrows on very narrow screens, if you'd rather
   keep them than hide them. Uncomment if you prefer visible arrows
   on mobile over the hidden variant above. */
/*
@media (max-width: 480px) {
    .mbl-carousel-arrow { width: 26px; height: 26px; font-size: 0.95rem; }
    .mbl-carousel-shell { gap: 4px; }
}
*/

/* GRID LAYOUT - Matches Most Popular style */
.mbl-grid-list {
    display: grid;
    gap: 25px;
    padding: 0;
}

.mbl-grid-list.columns-2 { grid-template-columns: repeat(2, 1fr); }
.mbl-grid-list.columns-3 { grid-template-columns: repeat(3, 1fr); }
.mbl-grid-list.columns-4 { grid-template-columns: repeat(4, 1fr); }

.mbl-grid-list .mbl-post-item {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 1px 5px darkblue;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.mbl-grid-list .mbl-post-item:hover {
    box-shadow: 0px 1px 5px blue;
    transform: translateY(-2px);
}

.mbl-grid-list .mbl-post-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: darkblue;
}

.mbl-grid-list .mbl-post-link:hover {
    color: blue;
}

.mbl-grid-list .mbl-thumb-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f0f0f0;
    line-height: 0; /* Prevents inline line-height spacing */
    padding: 0;    /* Overrides theme defaults */
    margin: 0;
}

.mbl-grid-list .mbl-thumb-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;  /* Clears theme-enforced image margins */
    padding: 0 !important; /* Clears theme-enforced image padding */
    border: none;
}

.mbl-grid-list .mbl-text {
    padding: 12px 15px;
}

.mbl-grid-list .mbl-title {
    font-weight: bold;
    line-height: 1.3;
    margin: 0 0 4px;
    color: darkblue;
}

.mbl-grid-list .mbl-title:hover {
    color: blue;
}

.mbl-grid-list .mbl-author {
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.8;
    margin: 0;
}

.mbl-grid-list .mbl-excerpt {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 8px 0 0;
}

/* CARDS LAYOUT - Matches Most Popular style but card-like */
.mbl-cards-list {
    display: grid;
    gap: 25px;
    padding: 0;
}

.mbl-cards-list .mbl-post-item {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 1px 5px darkblue;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    border: 1px solid #f0f0f0;
}

.mbl-cards-list .mbl-post-item:hover {
    box-shadow: 0px 1px 8px blue;
    transform: translateY(-4px);
}

.mbl-cards-list .mbl-post-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: darkblue;
}

.mbl-cards-list .mbl-post-link:hover {
    color: blue;
}

.mbl-cards-list .mbl-thumb-wrapper {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f5f5f5;
}

.mbl-cards-list .mbl-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mbl-cards-list .mbl-text {
    padding: 16px 20px 20px;
}

.mbl-cards-list .mbl-title {
    font-weight: bold;
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 6px;
    color: darkblue;
}

.mbl-cards-list .mbl-title:hover {
    color: blue;
}

.mbl-cards-list .mbl-author {
    font-size: 0.85em;
    font-style: italic;
    opacity: 0.8;
    margin: 0 0 8px;
}

.mbl-cards-list .mbl-excerpt {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.mbl-cards-list.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* COMPACT LAYOUT - Minimal */
.mbl-compact-list .mbl-post-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.mbl-compact-list .mbl-post-item:last-child {
    border-bottom: none;
}

.mbl-compact-list .mbl-post-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.mbl-compact-list .mbl-post-link:hover {
    background: #f5f5f5;
}

.mbl-compact-list .mbl-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: darkblue;
}

.mbl-compact-list .mbl-title:hover {
    color: blue;
}

.mbl-compact-list .mbl-author {
    font-size: 0.8rem;
    color: #888;
    margin-left: 10px;
    white-space: nowrap;
}

/* Other .mbl styling */
.sidebar .widget .textwidget .mbl-series-header {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.sidebar .widget .textwidget form:last-child,
.sidebar .widget .textwidget #wp_users_dropdown_form {
    margin-bottom: 20px !important;
}
/* ============================================================
   LISTINGS PAGINATION (includes legacy cpl)
   Compact, quiet, wraps gracefully on mobile.
   ============================================================ */

.cpl-popular-pagination,
.mbl-pagination {
    margin-top: 10px;
    padding: 4px 0;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* ---- The number row wrapper ----------------------------------
   This is the <span class="cpl-page-numbers"> / .mbl-page-numbers
   that sits between prev and next. It's a flex item of the
   outer pagination, so it must itself be a flex row with a
   matching height, otherwise the number buttons dangle below
   the baseline of prev/next. */
.cpl-page-numbers,
.mbl-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 22px;                 /* matches button height */
    flex-wrap: wrap;
}

/* ---- Every clickable / non-ellipsis control ------------------ */
.cpl-popular-pagination a,
.cpl-popular-pagination span:not(.cpl-ellipsis):not(.cpl-page-numbers),
.mbl-pagination a,
.mbl-pagination span:not(.mbl-ellipsis):not(.mbl-page-numbers) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    box-sizing: border-box;
}

.cpl-popular-pagination a:hover,
.mbl-pagination a:hover {
    background-color: #f0f0f0;
    border-color: #999;
}

/* ---- Current page ------------------------------------------- */
.cpl-popular-pagination .cpl-current-page,
.mbl-pagination .mbl-current-page {
    background-color: #0073aa;
    border-color: #0073aa;
    color: #fff;
    font-weight: 600;
}

/* ---- Disabled prev/next -------------------------------------- */
.cpl-popular-pagination .disabled,
.mbl-pagination .disabled {
    color: #ccc;
    border-color: #eee;
    background: #fafafa;
    cursor: not-allowed;
}

/* ---- Ellipsis ------------------------------------------------- */
.cpl-ellipsis,
.mbl-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 22px;
    padding: 0 2px;
    color: #888;
    user-select: none;
    font-size: inherit;
}

/* ---- Mobile: drop the Previous/Next words -------------------- */
@media (max-width: 420px) {
    .cpl-popular-pagination a.cpl-prev-page,
    .cpl-popular-pagination a.cpl-next-page,
    .mbl-pagination a.cpl-prev-page,
    .mbl-pagination a.cpl-next-page {
        padding: 0 5px;
        font-size: 0;
    }
    .cpl-popular-pagination a.cpl-prev-page::before,
    .mbl-pagination a.cpl-prev-page::before {
        content: "«";
        font-size: 0.9rem;
    }
    .cpl-popular-pagination a.cpl-next-page::after,
    .mbl-pagination a.cpl-next-page::after {
        content: "»";
        font-size: 0.9rem;
    }
}
/* ============================================
   3. Styling Rescue Wildebeest's Page
   ============================================ */
.page-id-1644 {
	background-color:darkblue;
	background-image: url('https://mushroom-scholars.org/wp-content/uploads/2025/05/stars.png');
    background-repeat: repeat;
	background-size: 100px 100px;
    background-position: top left;
	color: white;
}
.page-id-1644 .inside-article{
	background-image: url('https://mushroom-scholars.org/wp-content/uploads/2025/05/cosmic.png');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.page-id-1644 .entry-title{
	color: white;
	text-shadow: 2px 2px 4px darkblue;
}
.page-id-1644 h2 {
    text-shadow: 2px 2px 4px darkblue;
    /* Soft floating highlight */
    background: linear-gradient(
        120deg,
        rgba(255, 0, 255, 1) 0%,
        rgba(255, 0, 255, 1) 40%,
        rgba(255, 204, 255, 1) 50%, /* highlight stripe */
        rgba(255, 0, 255, 1) 60%,
        rgba(255, 0, 255, 1) 100%
    );

    background-size: 200% 100%;
    animation: pinkHighlight 5s ease-in-out infinite;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes pinkHighlight {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

#rescue-wildebeest-catlist{
	text-align:center;
}

.page-id-1644 #rescue-wildebeest-catlist .lcp_catlist {
    max-width: 50%;
    margin: 0 auto;   /* ✅ centers the entire block */
}

.page-id-1644 #primary-menu{
	background-color:darkblue;
	background-image: url('https://mushroom-scholars.org/wp-content/uploads/2025/05/stars.png');
    background-repeat: repeat;
	background-size: 100px 100px;
    background-position: top left;
}
 /* Target TOP-LEVEL menu item text color */
.page-id-1644 #primary-menu > ul > li.menu-item > a {
    color: #e6c8ff; /* Example light bluish pink */
	background-color:darkblue;
}

.page-id-1644 #primary-menu > ul > li.menu-item > a:hover {
    color: white; /* Example light bluish pink */
	font-weight: bold;
	background-color:blue;
}
#write-report-form{
	background-color: black;
	background: rgba(0,0,0,0.5);
}

/* Animate Rescue Wildebeest whizzing around screen */
#rescue-wildebeest-in-spaceship{
    position: fixed;
    width: 150px;
    height: auto;
    z-index: 9999;
    pointer-events: none;

    /* initial flip */
    transform: scaleX(1); /* facing left initially */

    /* animation */
    animation: whizzyZ 6s linear infinite;
}

@keyframes whizzyZ { 
	0% { left: 100%; top: 10%; transform: scaleX(1); /* facing left */ } 
	15% { left: 75%; top: 40%; /* diagonal down */ transform: scaleX(1); } 
	30% { left: 50%; top: 70%; /* reach bottom of Z */ transform: scaleX(1); } 
	45% { left: 25%; top: 40%; /* diagonal up mirrored Z */ transform: scaleX(1); } 
	60% { left: 0%; top: 10%; /* back to top-left */ transform: scaleX(1); }
	62% { left: 1%; top: 12%; transform: scaleX(-1); /* flip */}
	75% { left: 25%; top: 20%; /* back towards top-right */ transform: scaleX(-1); }
	100% { left: 100%; top: 10%; transform: scaleX(-1); /* facing right */ }
}
/* ============================================
   4. GROUP MANAGEMENT PAGE
   ============================================ */
/* ============================================================
   GROUP MANAGEMENT PAGE
   Two-panel layout: student list + action buttons
   ============================================================ */

/* Page wrapper — constrains width and centres everything. */
.shroom-group-management {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Top-level headings ("Select Users", "Add to Group", etc.) */
.shroom-group-management h2 {
    font-size: 1.15rem;
    color: darkblue;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

/* Two-column grid: student list on the left, actions on the right. */
.shroom-group-management .shroom-group-panels {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}

/* Right column stacks the two action panels vertically. */
.shroom-group-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;              /* sticks to the top while scrolling the list */
    top: 20px;
}

/* A panel is a light card — subtle, not fancy. */
.shroom-group-panel {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
}

/* ------------------------------------------------------------------
   STUDENT LIST
   ------------------------------------------------------------------ */

.shroom-group-management .markerless-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shroom-group-management .user-name-level-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background 0.15s ease;
}

.shroom-group-management .user-name-level-item:hover {
    background: #f5f8ff;
}

.shroom-group-management .user-name-level-item:last-child {
    border-bottom: none;
}

/* Checkbox styling — larger and clearer. */
.shroom-group-management .user-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

/* Student name. */
.shroom-group-management .user-name-level-item > *:nth-child(2) {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

/* The inner groups list — pill tags instead of a nested bullet list. */
.shroom-group-management .user-name-level-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.shroom-group-management .user-name-level-item ul li {
    display: inline-block;
    background: #e8f0fb;
    color: darkblue;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* "No Groups" pill — muted so it reads as a state, not a group. */
.shroom-group-management .user-name-level-item ul li:only-child {
    background: #f0f0f0;
    color: #888;
    font-style: italic;
}

/* ------------------------------------------------------------------
   ACTION BUTTONS (Add to Group / Remove from Group)
   ------------------------------------------------------------------ */

.shroom-group-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shroom-group-panel ul li {
    margin: 0;
}

.shroom-group-panel button {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.shroom-group-panel button:hover {
    background: #f0f8ff;
    border-color: darkblue;
    color: darkblue;
}

.shroom-group-panel button:active {
    transform: translateY(1px);
}

/* The two panels have different semantic weight. Slight tint difference. */
.shroom-group-panel.add-panel {
    border-left: 4px solid #2e7d32;
}

.shroom-group-panel.remove-panel {
    border-left: 4px solid #c62828;
}

.shroom-group-panel.add-panel button:hover {
    border-color: #2e7d32;
    background: #f1f8f1;
    color: #2e7d32;
}

.shroom-group-panel.remove-panel button:hover {
    border-color: #c62828;
    background: #fdf3f3;
    color: #c62828;
}

.shroom-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
    background: #f5f5f5;
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}
.shroom-select-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: #666;
    margin-left: 8px;
    font-style: italic;
}
.shroom-group-panel button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #ddd;
}
.shroom-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.9rem;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0.95;
    pointer-events: none;
}
/* ------------------------------------------------------------------
   RESPONSIVE — stack on narrow screens
   ------------------------------------------------------------------ */

@media (max-width: 800px) {
    .shroom-group-management .shroom-group-panels {
        grid-template-columns: 1fr;
    }
    .shroom-group-actions {
        position: static;
    }
}
/* ============================================
   5. STYLING by TAG
   ============================================ */
/* Body background for science-fiction posts */
body.tag-science-fiction {
    background-image: url('https://wpts.mushroom-scholars.org/wp-content/plugins/mushroom-frontend-styling/images/sci-fi.jpg');
    background-repeat: repeat;
    background-position: top left;
}
/* Body background for fantasy story posts */
body.tag-fantasy-story-writing {
    background-image: url('https://wpts.mushroom-scholars.org/wp-content/plugins/mushroom-frontend-styling/images/fantasy.jpg');
     background-repeat: repeat;
    background-attachment: fixed;
    background-position: top left;
}
/* Body background for nature themes */
body.tag-environment, body.tag-wildlife {
	background-image: url('https://wpts.mushroom-scholars.org/wp-content/plugins/mushroom-frontend-styling/images/nature.jpg');
     background-repeat: repeat;
    background-attachment: fixed;
    background-position: top left;
}
/* Body background for coding & tech themes */
body.tag-technology, body.tag-coding-projects {
	background-image: url('https://wpts.mushroom-scholars.org/wp-content/plugins/mushroom-frontend-styling/images/coding.jpg');
     background-repeat: repeat;
    background-attachment: fixed;
    background-position: top left;
}