/**
* CSS for author archieve page i.e archieve.php
*/

.author-bio-picture {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 20px;
    justify-content : space-between;
    align-items     : center;
    margin          : 20px 0;
}

.author-bio {
    flex      : 1 1 60%;
    min-width : 300px;
}

.border-line {
    width            : 100%;
    height           : 1px;
    margin           : 19px 30px 27px 0;
    background-color : #000;
}

.author-picture {
    flex       : 1 1 30%;
    text-align : center;
}

.author-picture img {
    max-width     : 150px;   /* Restrict maximum width */
    max-height    : 150px;   /* Restrict maximum height */
    width         : 100%;    /* Responsive sizing */
    height        : auto;
    object-fit    : cover;
    border-radius : 50%;
    box-shadow    : 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.bio-content {
    position : relative;
}


/* Hide the checkbox */
.bio-toggle {
    display : none;
}

.bio-toggle:checked ~ .bio-excerpt {
    display: none ; /* Hides the excerpt when checkbox is checked */
}
.bio-toggle:checked ~ .bio-full {
    display: inline; /* Shows the full bio when checkbox is checked */
}

.bio-toggle:not(:checked) ~ .bio-excerpt {
    display: inline; /* Shows the excerpt when checkbox is not checked */
}
.bio-toggle:not(:checked) ~ .bio-full {
    display: none; /* Hides the full bio when checkbox is not checked */
}
.bio-toggle:checked ~ .read-more-label {
    display: none;
}

/* Read More label styling */
.read-more-label {
    cursor: pointer;
    color: #dc0505;
    text-decoration: underline;
    margin-left: 5px;
}

.bio-content {
    line-height : 1.6;
    color       : #333;
}


.social-media-links {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
}

.social-media-icons {
    display : flex;
}

.social-media-icons a{
    margin-left :10px;
}

.social-media-links a svg {
    width  : 50px;
    height : 50px
}

/* Archieve author articles div css */
.author-posts {
    display        : flex;
    flex-direction : column;
    gap            : 20px;
}

.post {
    display          : flex;
    flex-direction   : column;
    padding          : 10px;
    border           : 1px solid rgba(0, 0, 0, 0.1);
    border-radius    : 5px;
    box-shadow       : 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color : #fff;
}

.post img {
    width      : 230px !important;
    height     : auto;
    object-fit : contain;
}

.thumbnail-and-excerpt-container {
    display     : flex;
    align-items : flex-start; /* Align thumbnail and content at the top */
}

.thumbnail-container {
    width            : 230px;
    flex-shrink      : 0;
    border-radius    : 5px;
    background-color : #f9f9f9;
    box-shadow       : 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow         : hidden;
    margin-right     : 15px; /* Spacing between thumbnail and excerpt */
}

.thumbnail-container:hover {
    box-shadow : 0 8px 12px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1); /* Stronger shadow on hover */
    transform  : scale(1.02); /* Slightly scale up on hover */
}

.placeholder-thumbnail {
    width            : 230px;
    height           : 150px;
    background-color : #f4f4f4;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    color            : #999;
    font-size        : 14px;
    border           : 1px dashed #d21717;
}

.excerpt-container {
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
}
.excerpt-container p {
    margin : 0;
}

.date-container {
    margin-top : 10px;
    font-size  : 13px;
    color      : #555;
}

.post h2 {
    font-size : 18px;
    margin    : 0 0 10px 0;
}

.post h2 a {
    text-decoration  : none;
    color            : black;
    transition       : color 0.3s ease;
}

.post h2 a:hover {
    color : grey;
}
/** PAGINATION CSS*/
.author-pagination{
	display         : flex;
	justify-content : center;
	align-items     : center;
	margin          : 20px auto
}

.author-pagination ul {
	flex            : 1;
	display         : flex;
	flex-wrap       : nowrap;
	justify-content : center;
	border-radius   : .25rem;
	list-style      : none;
}

.author-pagination li {
	background: var(--white);
	font-size: 14px;
	margin-left: -1px;
	border: 1px solid #ddd

}

.author-pagination li span.current,.author-pagination li a.current,.author-pagination li a:hover,.author-pagination li span:hover {
	background: #eceeef;
	color: var(--red)
}

.author-pagination li:first-child {
	border-bottom-left-radius: .25rem;
	border-top-left-radius: .25rem
}

.author-pagination li:last-child {
	border-bottom-right-radius: .25rem;
	border-top-right-radius: .25rem
}

.author-pagination li a,.author-pagination li span {
	padding: .625rem .938rem;
	display: block;
	color: #555
}
/* Responsive design: Stack elements vertically on smaller screens */
@media (max-width: 768px) {
    .author-bio-picture {
        flex-direction : row;
        align-items    : center;
    }
    .author-bio{
        flex       : 1 1 100%;
        text-align : center;
        order      : 2;
    }
    .author-picture {
        flex       : 1 1 100%;
        text-align : center;
        order      : 1
    }
    .author-bio h2 {
        margin-bottom : 10px;
    }
    .social-media-links{
        order  : 3;
        margin :0px 18px;

    }

    /* Archieve author articles div responsive css */
    .author-related-posts {
        order : 3;
    }
    .thumbnail-and-excerpt-container {
        flex-direction : column;
    }

    .thumbnail-container {
        width : 100%;
    }

    .placeholder-thumbnail {
        width  : 100%;
        height : 200px;
    }

    .excerpt-container {
        padding-left : 0;
    }

    .author-pagination{
        order : 4;
    }

	    .author-picture img {
        max-width  : 120px;
        max-height : 120px;
    }
}