/* Center aligns the top menu */
#top-menu {
    text-align: center;
    text-align: top; /* Aligns menu items to the top (could be adjusted if needed) */
}

/* Adds a black overlay with 70% opacity to the header image */
body:not(.no-header-image) .custom-header-image::before, 
.lodestar-front-page .custom-header-image::before {
    background: rgba(0, 0, 0, 0.4); /* Black overlay with 40% opacity */
}

/* Sets the height of the custom header image to 45% of the viewport height */
.custom-header-image {
    height: 45vh !important;
}

/* Adjusts the site title (h1) and paragraph (p) within the title */
h1.site-title, p.site-title {
    margin-bottom: 1px;
    font-size: 2em !important; /* Increases title font size */
}

/* Adjusts the site description (h1) and paragraph (p) within the description */
h1.site-description, p.site-description {
    margin-bottom: 1px;
    font-size: 1.5em !important; /* Increases tagline font size */
}

/* Styles the header image container */
.header-image {
    position: relative;
    height: 400px; /* Sets the height of the header image */
    overflow: hidden; /* Ensures any overflow content is hidden */
}

/* Centers the site branding (logo, title, tagline) within the header image */
.site-branding {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* Sets text color to white for better contrast */
}

/* Ensures title, description, and logo each appear on their own line */
.site-title,
.site-description,
.custom-logo-link {
    margin: 0;
    white-space: nowrap; /* Prevents wrapping of text */
    display: block; /* Ensures each element is on a separate line */
}

/* Increases the logo size and maintains aspect ratio */
.custom-logo {
    max-width: 250px; /* Limits logo width to 250px */
    height: auto; /* Maintains aspect ratio */
}

/* Adjusts spacing between logo, title, and tagline */
.site-branding > * + * {
    margin-top: 10px; /* Adds margin between elements */
}

/* Custom CSS for Header Image Positioning */

/* Ensures the header image is positioned to show the lower right first */
.site-header {
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the image covers the entire header area */
}

/* Adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .site-header {
        background-position: center right; /* Adjust positioning for smaller screens */
    }
}

/* -------------------------------------------- */
/* SOCIAL FEED STYLES */
/* Customizing Facebook Feed */

/* Font Change to Arimo for Photos and Videos */
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper,
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper *,
.efbl-halfwidth-skin.added_video.efbl-story-wrapper,
.efbl-halfwidth-skin.added_video.efbl-story-wrapper * {
    font-family: 'Arimo', sans-serif !important; /* Set the font to Arimo */
}

/* Background Styling for Photos and Videos */
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper,
.efbl-halfwidth-skin.added_video.efbl-story-wrapper {
    background-color: #707070 !important; /* Set background color */
    padding: 20px; /* Add spacing */
    border-radius: 8px; /* Rounded corners */
}

/* Font Color for Photos and Videos */
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper, 
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper h2, 
.efbl-halfwidth-skin.added_photos.efbl-story-wrapper p,
.efbl-halfwidth-skin.added_video.efbl-story-wrapper, 
.efbl-halfwidth-skin.added_video.efbl-story-wrapper h2, 
.efbl-halfwidth-skin.added_video.efbl-story-wrapper p {
    color: #ffffff !important; /* Set text, headings, and links to white */
}

/* Like/Comment Icon Styling for Photos and Videos */
.efbl-reacted-item,
.efbl-reacted-item i {
    color: #ffffff !important; /* Set like/comment icons to white */
}