/*
 * profile.css
 * Finalized styles with high contrast, clean button design, and support for custom image icons.
 */

/* --- Main Section Layout --- */
.author-profile {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 25px;
    border: 1px solid #cccccc; 
    background-color: #ffffff; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* --- Author Box Layout --- */
.author-box {
    display: flex; 
    align-items: center; 
    gap: 30px; 
}

/* --- Author Photo Styling --- */
.author-box-photo {
    flex-shrink: 0; 
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    overflow: hidden;
    border: 3px solid #333333; 
}

.author-box-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Author Info Styling --- */
.author-info { flex-grow: 1; }
.author-info h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.6em; 
    color: #111111; 
    font-weight: 700;
}
.author-info p {
    margin-top: 0;
    font-size: 1em; 
    line-height: 1.6;
    color: #333333; 
}

/* --- Social Links Styling (Buttons and Image Icons) --- */
.author-social {
    margin-top: 15px;
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap;
}

.author-social a {
    display: inline-flex; 
    align-items: center;
    padding: 8px 15px; 
    background-color: #f0f0f0; 
    border-radius: 4px;
    color: #333333;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    border: 1px solid #cccccc; 
    transition: all 0.2s ease-in-out;
}

/* Image Icon Styling and Spacing */
.author-social a .social-icon {
    width: 18px;    /* Set a fixed size for the image icon */
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Hover Effect: General */
.author-social a:hover {
    background-color: #ffffff; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transform: translateY(-1px);
}

/* Specific Brand Color Contrast on Hover (for the text/border) */

/* X (Twitter) */
.author-social a.x:hover { color: #111111; border-color: #111111; }

/* LinkedIn */
.author-social a.linkedin:hover { color: #0077B5; border-color: #0077B5; }

/* YouTube */
.author-social a.youtube:hover { color: #FF0000; border-color: #FF0000; }

/* Facebook */
.author-social a.facebook:hover { color: #1877F2; border-color: #1877F2; }

/* Pinterest */
.author-social a.pinterest:hover { color: #BD081C; border-color: #BD081C; }

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .author-box {
        flex-direction: column; 
        align-items: center; 
        text-align: center;
    }
}