/* Force override of al-folio link colors */
a,
a:visited,
.post-content a,
.post-content a:visited,
.content a,
.content a:visited {
    color: #0077b5 !important;   /* LinkedIn blue */
    text-decoration: none;
}

a:hover,
a:focus,
.post-content a:hover,
.post-content a:focus,
.content a:hover,
.content a:focus {
    color: #005582 !important;   /* darker hover */
    text-decoration: underline;  /* optional */
}

/* Dark mode */
[data-theme="dark"] a,
[data-theme="dark"] a:visited,
[data-theme="dark"] .post-content a,
[data-theme="dark"] .post-content a:visited {f
    color: #66b3ff !important;   /* lighter blue for contrast */
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus,
[data-theme="dark"] .post-content a:hover,
[data-theme="dark"] .post-content a:focus {
    color: #99ccff !important;
}


/* Move profile image upward
.profile img {
    margin-top: -5em !important;
}
*/
f
/* Reduce space above & below social icons */
.social {
    margin-top: 0.5em;    /* reduce top gap */
    margin-bottom: 0.5em; /* reduce bottom gap */
}

.contact-icons {
    margin-top: 0;        /* override theme spacing */
    margin-bottom: 0;     /* override theme spacing */
    line-height: 1;       /* compact line height */
}

/* Adjust icon size slightly if needed */
.contact-icons a i,
.contact-icons a svg {
    font-size: 1.6em;     /* match your current look */
}

/* Color for the blog page title

/* Light mode */
[data-theme="light"] .header-bar h1 {
    color: #355E3B;
    font-weight: 200;
    font-size: 5.6em;
}

/* Dark mode */
[data-theme="dark"] .header-bar h1 {
    color: #355E3B;
    font-weight: 200;
}


/* Blog Banner */

.fullwidth-banner {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 300px; /* default desktop height */
    overflow: hidden;
}

.fullwidth-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* focus area for desktop */
    display: block;
    transition: object-position 0.5s ease; /* smooth adjustment */
}


/*
 * object-position: <horizontal> <vertical>;
 * Example	Meaning
 * object-position: center center;	(default) shows the middle of the image
 * object-position: center top;	keeps the top visible, crops bottom
 * object-position: center bottom;	keeps bottom visible, crops top
 * object-position: left center;	focuses on left side
 * object-position: right center;	focuses on right side
 * object-position: 50% 25%;	custom crop, percentages from top-left corner
 */

/* Responsive adjustments
 On large screens → focus near middle (40%)                    *
 On tablets → shift focus upward slightly (35%)
 On phones → show more of the upper part (25%) and reduce height
*/

/* Tablet (medium screens) */
@media (max-width: 992px) {
    .fullwidth-banner {
        height: 200px;
    }

    .fullwidth-banner img {
        object-position: 50% 35%; /* move focus slightly higher */
    }
}

/* Mobile (small screens) */
@media (max-width: 600px) {
    .fullwidth-banner {
        height: 160px;
    }

    .fullwidth-banner img {
        object-position: 50% 25%; /* focus even higher for tight aspect ratio */
    }

    /* Light mode */
    [data-theme="light"] .header-bar h1 {
        color: #355E3B;
        font-weight: 200;
        font-size: 1.6em;
    }

    /* Dark mode */
    [data-theme="dark"] .header-bar h1 {
        color: #355E3B;
        font-weight: 200;
        font-size: 1.6em;
    }
}