/* Header Styling */

.site-header {

    position: sticky;

    top: 0;

    display: flex;

    justify-content: space-between; /* HERBIE on the left, socials on the right */

    align-items: flex-start; /* Align everything to the top */

    width: 100%;

    background: transparent;
    background-color: transparent;

    padding: 10px 15px; /* Compact spacing */

    z-index: 1000;

    box-sizing: border-box; /* Include padding in width calculations */

}



/* Header Container */

.header-container {

    display: flex;

    justify-content: space-between; /* Distribute space evenly */

    align-items: flex-start; /* Align content to the top */

    width: 100%;

}



/* HERBIE Link */

.brand-link {

    font-size: 20px;

    font-weight: bold;

    text-decoration: none; /* Remove underline */

    color: #333333;

    display: block; /* Ensures proper block behavior */

    margin: 0; /* Remove any default margin */

}



.brand-link:hover {

    color: #555555;

}



/* Social Links */

.social-links {

    display: flex;

    gap: 15px; /* Space between icons */

}



.social-links a {

    font-size: 1.5em;

    color: var(--primary-color);

    text-decoration: none;

    transition: color 0.3s ease, transform 0.3s ease;

}



.social-links a:hover {

    color: var(--secondary-color);

    transform: scale(1.1); /* Subtle zoom on hover */

}



/* Responsive Design */

@media (max-width: 768px) {

    .site-header {

        padding: 8px 10px;

    }



    .social-links {

        gap: 10px;

    }

}



@media (max-width: 480px) {

    .social-links a {

        font-size: 16px;

    }



    .brand-link {

        font-size: 18px;

    }

}