/**
 * Hawaii Magazine Author Bios - Frontend Styles
 *
 * @package HiMag_Author_Bios
 */

/* Hide Astra's automatic featured image on author bio pages */
.single-author_bios .ast-article-featured-image,
.single-author_bios .post-thumb,
.single-author_bios .entry-header .post-thumb-img-content,
.single-author_bios article > .post-thumb,
.single-author_bios .ast-single-post-featured-image {
    display: none !important;
}

/* Ensure only the shortcode-rendered featured image shows */
.single-author_bios .author-bio-content-wrapper .author-featured-image {
    display: block !important;
}

/* Fix: Only show one featured image - hide any that aren't from our shortcode */
.single-author_bios .author-bio-content-wrapper img.wp-post-image:not(.author-featured-image img) {
    /* Don't hide - we need these */
}

/* Author Bio Single Page */
.author-bio-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.author-bio-container {
    background: #fff;
}

/* Header Section */
.author-bio-header {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e5e5;
}

.author-bio-image {
    flex: 0 0 200px;
    margin-bottom: 1rem;
}

.author-bio-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.author-bio-info {
    flex: 1;
    min-width: 250px;
}

.author-bio-name {
    font-size: 2rem;
    margin: 0 0 0.5rem;
    color: #333;
}

.author-bio-title {
    font-size: 1.125rem;
    color: #666;
    margin: 0 0 1rem;
    font-style: italic;
}

.author-bio-email a {
    color: #0073aa;
    text-decoration: none;
}

.author-bio-email a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   WPBakery Template Styles - Legacy Template Support
   ========================================================================== */

/* Author Field Container */
.author-field {
    margin-bottom: 0.5rem;
}

.author-field.inline {
    display: inline;
}

/* Title/Position Field */
.author-title-position {
    font-size: 1.125rem;
    font-style: italic;
    color: #666;
    margin-bottom: 1rem;
    display: block;
}

.author-title-position.inline {
    display: inline;
}

/* Featured Image - Floated */
.author-featured-image {
    margin-bottom: 1rem;
}

.author-featured-image.float-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 300px;
}

.author-featured-image.float-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    max-width: 300px;
}

.author-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Bio Content */
.author-bio-content {
    line-height: 1.7;
    font-size: 1rem;
    color: #444;
    overflow: hidden; /* Clear floats */
}

.author-bio-content p {
    /*margin-bottom: 1rem;*/
    margin-bottom:0!important;
}

/* Social Links - Inline Style for WPBakery Template */
.author-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    background-color: #666;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.author-social i {
    line-height: 1;
}

.author-social:hover {
    color: #fff;
    background-color: #333;
}

.author-social.inline {
    display: inline-flex;
}

.author-social.author-facebook:hover {
    background-color: #1877f2;
}

.author-social.author-twitter:hover {
    background-color: #000;
}

.author-social.author-linkedin:hover {
    background-color: #0a66c2;
}

.author-social.author-instagram:hover {
    background-color: #e4405f;
}

.author-social.author-google:hover {
    background-color: #db4437;
}

.author-social.author-email:hover {
    background-color: #333;
}

/* ==========================================================================
   Author Bio List (Articles Section)
   ========================================================================== */

.author-bio-list,
.author-bio-articles-list {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
    clear: both;
}

.author-bio-list h2,
.author-bio-list .list-title,
.author-bio-articles-list .hm-list-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Author Articles List Items */
.author-articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.author-articles-list .hm-list-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.author-articles-list .hm-list-item:last-child {
    border-bottom: none;
}

.author-articles-list .hm-list-item-link {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

.author-articles-list .hm-list-item-link:hover {
    opacity: 0.8;
}

.author-articles-list .hm-list-item-image {
    flex: 0 0 100px;
}

.author-articles-list .hm-list-item-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.author-articles-list .hm-list-item-content {
    flex: 1;
}

.author-articles-list .hm-list-item-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: #333;
    line-height: 1.4;
}

.author-articles-list .hm-list-item-date {
    font-size: 0.875rem;
    color: #666;
}

/* Pagination */
.hm-pagination {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.hm-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: #f5f5f5;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}

.hm-pagination .page-numbers.current {
    background: #333;
    color: #fff;
}

.hm-pagination .page-numbers:hover:not(.current) {
    background: #e5e5e5;
}

/* Posts List - Headlines Style (matches template ID 18) */
.hm-content-list .hm-posts-list,
.author-bio-list .hm-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hm-content-list .hm-posts-list.basic-list .hm-post-item,
.author-bio-list .hm-posts-list.basic-list .hm-post-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.hm-content-list .hm-posts-list.basic-list .hm-post-item:last-child,
.author-bio-list .hm-posts-list.basic-list .hm-post-item:last-child {
    border-bottom: none;
}

.hm-content-list .hm-posts-list.basic-list a,
.author-bio-list .hm-posts-list.basic-list a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
    transition: color 0.2s ease;
}

.hm-content-list .hm-posts-list.basic-list a:hover,
.author-bio-list .hm-posts-list.basic-list a:hover {
    color: #0073aa;
}

.author-bio-list .hm-post-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.author-bio-list .hm-post-item:last-child {
    border-bottom: none;
}

.author-bio-list .post-link {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.author-bio-list .post-link:hover {
    color: #0073aa;
}

.author-bio-list .post-title {
    font-weight: 500;
}

/* Pagination */
.author-bio-list .hm-pagination {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.author-bio-list .hm-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.author-bio-list .hm-pagination .page-numbers:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.author-bio-list .hm-pagination .page-numbers.current {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* Archive Link */
.author-bio-list .archive-link {
    margin-top: 1rem;
    text-align: right;
}

.author-bio-list .archive-link a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
}

.author-bio-list .archive-link a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Legacy Styles (for compatibility)
   ========================================================================== */

/* Social Links in Header */
.author-bio-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.author-bio-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.author-bio-social .social-link:hover {
    opacity: 0.8;
}

.author-bio-social .social-link.facebook {
    background: #1877f2;
}

.author-bio-social .social-link.twitter {
    background: #1da1f2;
}

.author-bio-social .social-link.linkedin {
    background: #0a66c2;
}

.author-bio-social .social-link.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.author-bio-social .social-link.google {
    background: #db4437;
}

/* Articles Section */
.author-bio-articles {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
}

.author-bio-articles h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #333;
}

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

.article-item {
    margin-bottom: 1rem;
}

.article-item a {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.article-item a:hover {
    background: #f0f0f0;
}

.article-thumbnail {
    flex: 0 0 100px;
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.article-info {
    flex: 1;
}

.article-info h3 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: #333;
}

.article-info time {
    font-size: 0.875rem;
    color: #666;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 768px) {
    .author-bio-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .author-bio-image {
        flex: 0 0 auto;
        width: 150px;
    }
    
    .author-bio-social {
        justify-content: center;
    }
    
    .author-featured-image.float-right,
    .author-featured-image.float-left {
        float: none;
        margin: 0 auto 1rem;
        max-width: 100%;
    }
    
    .article-item a {
        flex-direction: column;
    }
    
    .article-thumbnail {
        flex: 0 0 auto;
        width: 100%;
    }
}