/* =========================================
   HUDDLESTOCK THEME
   ========================================= */

:root {
    --hs-primary: #03171D;       /* Black */
    --hs-accent:  #03171D;       /* Black */
    --hs-border:  #7DFFE7;       /* Divider lines */
    --hs-bg-sidebar: #f7f7f7;    /* Sidebar background (White) */
    --hs-bg-card:    #f7f7f7;    /* News Card Background (Light Gray) */
}

/*MFN-BLOCK*/
.mfn-block {
	margin: 10px !important;
}
.mfn-info-main {
	    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--hs-primary) !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    display: block;
	
}

/* 1. THE GRID ENGINE */
.mfn-loader-list-container {
    display: grid !important;
    /* Two columns: Sidebar (260px) and News (Remaining space) */
    grid-template-columns: 260px 1fr !important; 
    gap: 40px; 
    align-items: start; 
    max-width: 1200px;
    margin: 40px auto;
    font-family: 'Inter', sans-serif !important;
    color: var(--hs-primary);
}

/* 2. LEFT COLUMN (The Sidebar) */
.mfn-loader-list-container .mfn-toolbar-options {
    grid-column: 1 / 2 !important; 
    grid-row: 1 / 50 !important;   
    
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--hs-bg-sidebar);
    border: 1px solid var(--hs-border);
    border-radius: 8px;
    padding: 25px;
}

/* Sidebar Inputs */
.mfn-loader-list-container .mfn-search-input,
.mfn-loader-list-container .mfn-select {
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 10px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--hs-primary);
}

.mfn-loader-list-container .mfn-toolbar-option span {
    display: block;
    margin-bottom: 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #6B7280;
}

/* 3. RIGHT COLUMN (The News Feed) */
.mfn-loader-list-container .mfn-row,
.mfn-loader-list-container .mfn-preamble,
.mfn-loader-list-container .mfn-pagination,
.mfn-loader-list-container .mfn-notfound {
    grid-column: 2 / -1 !important; 
    width: 100% !important;         
}

/* --- NEWS CARD STYLING --- */
.mfn-loader-list-container .mfn-row {
    display: flex !important;
    flex-direction: column !important;
    
    background-color: var(--hs-bg-card) !important; 
    border: 1px solid var(--hs-border);
    border-radius: 8px !important; 
    
    /* Spacious Padding inside the box */
    padding: 20px !important; 
    margin-bottom: 25px !important;
    
    transition: all 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
    box-sizing: border-box !important;
}

/* Hover Effect */
.mfn-loader-list-container .mfn-row:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08); 
    background-color: #FFFFFF !important; 
    border-color: var(--hs-accent); 
}

/* 4. TYPOGRAPHY & DETAILS (With 10px Indent) */

/* The Date */
.mfn-loader-list-container .mfn-date {
    font-size: 12px;
    color: #8899A6;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px !important;
    letter-spacing: 0.5px;
    
    /* Indent */
    margin-left: 10px !important; 
}

/* The Headline */
.mfn-loader-list-container a.mfn-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--hs-primary) !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    display: block;
}

.mfn-loader-list-container a.mfn-title:hover {
    color: var(--hs-accent) !important;
}

/* The Tags List Wrapper */
.mfn-loader-list-container .mfn-tags-list {
    margin-bottom: 20px !important;
}

/* The Tag Badge */
.mfn-loader-list-container .mfn-tag {
    background-color: #EBF8FF;
    color: var(--hs-primary);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
   /* margin-right: 8px;*/
    border: 1px solid #BEE3F8;
}

/* The "Read More" Button */
.mfn-loader-list-container .mfn-read-more {
    color: var(--hs-accent);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 25px !important;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 0.5px;
}

/* 5. PAGINATION & EXTRAS */
.mfn-loader-list-container button, 
.mfn-loader-list-container .mfn-pagination-link {
    background: white !important;
    color: var(--hs-primary) !important;
    border: 1px solid var(--hs-border) !important;
    border-radius: 4px;
    padding: 8px 16px;
    font-weight: 600;
    margin-top: 20px;
    cursor: pointer;
}

.mfn-loader-list-container button:hover, 
.mfn-loader-list-container .mfn-pagination-link:hover {
    background: var(--hs-primary) !important;
    color: white !important;
}

/* 6. MOBILE RESPONSIVENESS */
@media only screen and (max-width: 900px) {
    .mfn-loader-list-container {
        grid-template-columns: 1fr !important; 
    }
    
    .mfn-loader-list-container .mfn-toolbar-options {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;     
        margin-bottom: 30px;
    }

    .mfn-loader-list-container .mfn-row,
    .mfn-loader-list-container .mfn-preamble, 
    .mfn-loader-list-container .mfn-pagination {
        grid-column: 1 / -1 !important; 
    }
}