/* === CFF Blog Archive Soft Layout (Updated) === */
/* Uses your existing :root variables instead of hard-coded admin-panel colors. */
/* BlogList.asp styled to match Blog1.asp layout */

.cff-blog-layout{
    display:grid;
    grid-template-columns:1fr 300px;
    gap:50px;
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
}

.cff-blog-posts article,
.cff-blog-card,
.cff-blog-empty-card{
    background:var(--panel-bg-alt,#fff);
    padding:30px;
    margin-bottom:30px;
    border:1px solid var(--border-soft,rgba(0,0,0,.055));
    border-radius:8px;
    box-shadow:var(--shadow-soft,0 2px 10px rgba(0,0,0,.05));
}

.cff-blog-post-meta{
    font-size:.85rem;
    color:var(--link-color,#666);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:10px;
}

.cff-blog-card h2{
    margin:0 0 15px 0;
    font-size:1.8rem;
    line-height:1.25;
}

.cff-blog-card h2 a{
    color:var(--text-main,#555);
    text-decoration:none;
}

.cff-blog-card h2 a:hover{
    color:var(--link-color,#666);
}

.cff-blog-card p,
.cff-blog-empty-card p{
    color:var(--text-soft,#777);
    margin:0 0 15px 0;
}

.cff-blog-read-more{
    color:var(--link-color,#666);
    font-weight:bold;
    text-decoration:none;
}

.cff-blog-read-more:hover{
    color:var(--text-main,#555);
}

.cff-blog-admin-link{
    max-width:1100px;
    margin:20px auto 0 auto;
    padding:0 20px;
}

.cff-blog-admin-link a{
    color:var(--link-color,#666);
    font-weight:bold;
    text-decoration:none;
}

.cff-blog-history-sidebar{
    position:sticky;
    top:20px;
    height:fit-content;
}

.cff-blog-history-sidebar h3{
    font-size:1.2rem;
    border-bottom:2px solid var(--text-main,#555);
    padding-bottom:10px;
    margin:0 0 20px 0;
    color:var(--text-main,#555);
}

.cff-blog-year-block{
    margin-bottom:25px;
}

.cff-blog-year-label{
    font-weight:bold;
    font-size:1.1rem;
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    color:var(--text-main,#555);
}

.cff-blog-year-label span{
    font-size:.8rem;
    color:var(--text-soft,#777);
    font-weight:normal;
}

.cff-blog-month-block{
    margin-left:15px;
    padding-left:15px;
    border-left:1px solid var(--border-soft,rgba(0,0,0,.055));
    margin-bottom:15px;
}

.cff-blog-toggle-check{
    display:none;
}

.cff-blog-month-label{
    font-size:.9rem;
    color:var(--text-soft,#777);
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
}

.cff-blog-month-label:before{
    content:"▶";
    margin-right:6px;
    font-size:10px;
    color:var(--text-soft,#777);
}

.cff-blog-toggle-check:checked + .cff-blog-month-label:before{
    content:"▼";
}

.cff-blog-count{
    font-size:.78rem;
    color:var(--text-soft,#777);
}

.cff-blog-day-list{
    list-style:none;
    padding:0;
    margin:0;
    display:none;
}

.cff-blog-toggle-check:checked + .cff-blog-month-label + .cff-blog-day-list{
    display:block;
}

.cff-blog-day-item{
    font-size:.85rem;
    margin-bottom:6px;
    display:flex;
    align-items:baseline;
}

.cff-blog-day-number{
    font-weight:bold;
    color:var(--link-color,#666);
    min-width:25px;
}

.cff-blog-day-item a{
    text-decoration:none;
    color:var(--text-main,#555);
    transition:color .2s ease;
}

.cff-blog-day-item a:hover{
    color:var(--link-color,#666);
}

@media all and (max-width:850px){

    .cff-blog-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .cff-blog-history-sidebar{
        position:static;
        order:2;
    }

    .cff-blog-posts{
        order:1;
    }

}

.cff-blog-archive{
    margin:0;
    padding:0;
    list-style:none;
}

.cff-blog-admin-link{
    margin:0 0 12px 0;
    padding:0;
    list-style:none;
}

.cff-blog-year-block{
    margin:0 0 12px 0;
    padding:0;
    list-style:none;
    background:var(--panel-bg);
    border:1px solid var(--border-soft);
    border-radius:10px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.cff-blog-year-title,
.cff-blog-month-title{
    width:100%;
    border:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    color:var(--text-main);
}

.cff-blog-year-title{
    padding:11px 14px;
    background:var(--panel-bg-alt);
    font-size:18px;
    font-weight:600;
}

.cff-blog-year-title:hover,
.cff-blog-month-title:hover{
    box-shadow:var(--shadow-hover);
}

.cff-blog-year-content{
    padding:8px 10px 10px 10px;
}

.cff-blog-month-block{
    margin:7px 0 0 0;
    background:var(--panel-bg-alt);
    border:1px solid var(--border-soft);
    border-radius:8px;
    overflow:hidden;
}

.cff-blog-month-title{
    padding:9px 12px;
    background:transparent;
    font-size:15px;
    font-weight:600;
}

.cff-blog-count{
    font-size:12px;
    font-weight:400;
    color:var(--text-soft);
    white-space:nowrap;
}

.cff-blog-entry-list{
    margin:0;
    padding:0 12px 10px 28px;
    list-style:none;
}

.cff-blog-entry-list li{
    margin:0;
    padding:5px 0;
    border-top:1px solid var(--border-soft);
}

.cff-blog-entry-list a{
    display:inline-flex;
    gap:8px;
    align-items:baseline;
    color:var(--link-color);
    text-decoration:none;
}

.cff-blog-entry-list a:hover{
    color:var(--text-main);
    transform:translateX(3px);
}

.cff-blog-entry-day{
    min-width:22px;
    color:var(--text-soft);
    font-size:12px;
}

.cff-blog-entry-title{
    color:inherit;
}

.cff-blog-empty{
    list-style:none;
    color:var(--text-soft);
    background:var(--panel-bg);
    border:1px solid var(--border-soft);
    border-radius:10px;
    padding:12px 14px;
    box-shadow:var(--shadow-soft);
}

.cff-blog-is-collapsed{
    display:none;
}

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

    .cff-blog-year-title{
        font-size:16px;
    }

    .cff-blog-year-content{
        padding:6px;
    }

    .cff-blog-entry-list{
        padding-left:16px;
    }

}
/* === End CFF Blog Archive Soft Layout (Updated) === */


.blog-admin-panel{
    margin-top:25px;
    padding:16px 20px;
    border:1px solid #d9dde3;
    border-radius:8px;
    background:#ffffff;
}

.admin-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#6b7280;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid #eceff3;
}

.admin-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    width:100%;
    gap:12px;
}

.admin-item{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    font-weight:600;
    color:#1f2937;
}

.admin-item strong{
    font-size:13px;
    font-weight:700;
    color:#6b7280;
}

.admin-separator{
    text-align:center;
    color:#6b7280;
}

.admin-left{
    justify-content:flex-start;
}

.admin-center{
    justify-content:center;
}

.admin-right{
    justify-content:flex-end;
}


.title{
color:#6b7280;	
}



.blog-header-panel {
    margin: 20px 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(214, 220, 232);
    border-image: initial;
    border-radius: 6px;
    background: rgb(250, 251, 253);
    overflow: hidden;
}
.blog-header-top {
    padding: 20px;
}
.BlogTitle {
    display: block;
    font-size: 15pt;
    font-weight: 700;
    line-height: 1.3;
    color: rgb(147, 158, 158);
    margin: 0px 0px 10px;
}
.blog-date {
    font-size: 0.95rem;
    color: rgb(147, 158, 158);
}
.blog-date strong {
    color: rgb(147, 158, 158);
}



/*--=================Sidebar==============--*/
        :root {
            --primary-color: #2d3436;
            --accent-color: #0984e3;
            --text-gray: #636e72;
            --border-light: #dfe6e9;
            --bg-body: #f9f9f9;
        }

        /* Layout Container */
        .Blogcontainer {
            display: grid;
            grid-template-columns: 1fr 300px; /* Main content | Sidebar */
            gap: 50px;
            max-width: 1100px;
            margin: 40px auto;
            padding: 0 20px;
        }

        /* Main Content Styling */
        .blog-posts article {
            background: white;
            padding: 30px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .post-meta {
            font-size: 0.85rem;
            color: var(--accent-color);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        h2 { margin: 0 0 15px 0; font-size: 1.8rem; }
        p { color: var(--text-gray); }

        /* Sidebar History Styling */
        .history-sidebar {
            position: sticky;
            top: 20px;
            height: fit-content;
        }

        .history-sidebar h3 {
            font-size: 1.2rem;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

.h3{
	color: var(--text-gray);
}
        .year-block { color: var(--text-gray);}
        
        .year-label {
            font-weight: bold;
            font-size: 1.1rem;
            display: block;
            margin-bottom: 10px;
			color: var(--text-gray);
        }

        .month-block {
            margin-left: 15px;
            padding-left: 15px;
            border-left: 1px solid var(--border-light);
            margin-bottom: 15px;
        }

        .month-label {
            font-size: 0.9rem;
            color: var(--text-gray);
            margin-bottom: 8px;
            display: block;
        }

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

        .day-item {
            font-size: 0.85rem;
            margin-bottom: 6px;
            display: flex;
            align-items: baseline;
        }

        .day-number {
            font-weight: bold;
            color: var(--accent-color);
            min-width: 25px;
        }

        .day-item a {
            text-decoration: none;
            color: var(--primary-color);
            transition: color 0.2s;
        }

        .day-item a:hover {
            color: var(--accent-color);
        }
		
		.Links{
		color: var(--primary-color);
		font-size: 15pt;
		}

        /* Responsive Design */
        @media (max-width: 850px) {
            .container { grid-template-columns: 1fr; }
            .history-sidebar { position: static; order: 2; }
        }
		
		
		
.year-block{
    margin:0;
    padding:0;
}

.year-block > details{
    margin:0;
    padding:0;
}

.year-label,
.month-label{
    cursor:pointer;
    list-style:none;
}

.year-label::-webkit-details-marker,
.month-label::-webkit-details-marker{
    display:none;
}

.month-block{
    margin-left:18px;
    padding-left:14px;
    border-left:1px solid #d6dbe1;
}

.day-list{
    margin:4px 0 4px 18px;
    padding-left:14px;
    border-left:1px solid #d6dbe1;
    list-style:none;
}

.month-label,
.day-item{
    position:relative;
}

.month-label::before,
.day-item::before{
    content:"";
    position:absolute;
    left:-14px;
    top:50%;
    width:12px;
    border-top:1px solid #d6dbe1;
}

.day-item{
    margin:4px 0;
    padding-left:4px;
}

.day-item:last-child::after,
.month-block:last-child > .month-label::after{
    content:"";
    position:absolute;
    left:-14px;
    top:50%;
    width:1px;
    height:50%;
    background:#fff;
}
/*--=================Sidebar==============--*/