@media only screen and (min-width: 431px) {
    .site-branding {
        margin-bottom: -30px;
    }
}

.content-area #breadcrumbs {
    text-align: left;
    margin-left: 0;
    padding-left: 0;
    font-size: 18px; /* Adjust as needed */
    color: #333; /* Text color */
}

#breadcrumbs a {
    color: #A42361; /* Breadcrumb link color */
    text-decoration: none; /* Remove underline from links */
}

#breadcrumbs a:hover {
    text-decoration: underline; /* Underline on hover */
}

.home #breadcrumbs {
    display: none;
}

/* Adjustments for mobile view */
@media only screen and (max-width: 430px) {
    .content-area #breadcrumbs {
        margin-top: 20px; /* Add top margin to push breadcrumbs down */
    }
    
    /* Ensure header remains above breadcrumbs */
    #masthead.site-header {
        z-index: 9999;
    }
}

@media only screen and (max-width: 430px) {
    .header-widgets .wp-block-search {
        width: 255px !important; /* Force the width to 255px on mobile */
    }
	
	/* Exclude the dropdown items from right alignment */
    #header-widgets .donate-widget-dropdown .dropdown-content {
        text-align: left; /* Left-align the dropdown items */
    }
	
	/* Right-align everything inside the header widgets */
    #header-widgets {
        text-align: right; /* Right-align text inside the container */
			margin-top: 0 !important; /* Remove the top margin on mobile */
    }

    /* Ensure the flex containers align content to the right */
    #header-widgets .wp-block-group,
    #header-widgets .wp-block-buttons,
    #header-widgets .donate-widget-dropdown {
        justify-content: flex-end !important; /* Push content to the right */
    }

    /* Right-align any buttons or form inputs */
    #header-widgets .wp-block-button,
    #header-widgets .wp-block-search,
    #header-widgets .wp-block-search__inside-wrapper {
        text-align: right; /* Ensure the buttons and search input are aligned right */
    }

    /* For the search form */
    #header-widgets .wp-block-search__input,
    #header-widgets .wp-block-search__button {
        margin-left: auto; /* Push search input and button to the right */
    }
}

/* Make the header sticky */
#masthead.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Ensures the header spans the full viewport width */
    z-index: 9999;
    background-color: #fff; /* Optional: Adds background to prevent transparency */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow */
    overflow-x: hidden; /* Prevents horizontal overflow */
}

.header-widgets .wp-block-search {
    width: 195px;
}

/* Add padding to the body to prevent content from hiding under the header */
body {
    padding-top: 100px; /* Adjust this value based on your header height */
    overflow-x: hidden; /* Prevents horizontal scroll on the entire page */
}

/* Ensure no extra space is added to the right of the header */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Additional adjustment for pages with content hidden under the header */
.main-content, .site-content, .page-content { /* Adjust these selectors based on your theme */
    margin-top: 100px; /* Match this value to the header height */
}

.header-widgets .wp-block-search {
    margin-bottom: 0 !important; /* Remove the margin that is pushing it too high */
    margin-top: 0; /* Add this if the search bar is still too close to the top */
    align-self: center; /* Optional: Center-align the search bar vertically within the flex container */
}

.header-widgets .widget:first-child {
    margin-right: 0 !important; /* Ensure no unwanted margin is added */
}

/* Container for the header widgets */
.header-widgets {
    display: flex;
    justify-content: flex-end; /* Aligns items to the right */
    align-items: center;
    width: 100%;
    margin-left: auto; /* Pushes the widget to the right */
    padding-right: 0px; /* Optional: Adds extra padding to the right */
}

/* Space out the blocks within the header widgets */
.header-widgets > * {
    margin-left: 10px; /* Adds space between each block in the header widget */
}

/* Style the Donate button and its dropdown container */
.donate-widget-dropdown {
    position: relative;
    display: inline-block;
}

/* Style the Donate button */
.donate-button {
    background-color: #155B66; /* Your button color */
    color: black;
    padding: 18px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    font-weight: bold;
}

/* Hover effect for the Donate button */
.donate-button:hover {
    background-color: #A42361; /* Berry color on hover */
    color: #ffffff; /* White text on hover */
}

/* Style the dropdown content */
.donate-widget-dropdown .dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position it directly below the button */
    left: 0;
    background-color: #A42361;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9998; /* Ensure it is below the header but above the content */
    padding: 10px 0;
    border-radius: 5px;
}

/* Display the dropdown on hover */
.donate-widget-dropdown:hover .dropdown-content {
    display: block;
}

/* Style the links inside the dropdown */
.donate-widget-dropdown .dropdown-content a {
    color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change link background color on hover */
.donate-widget-dropdown .dropdown-content a:hover {
    background-color: #155B66;
}

/* Adjust dropdown content so it can extend below the header */
#masthead.site-header {
    z-index: 9999; /* Ensure the header stays on top */
    overflow: visible; /* Allow dropdown to extend outside the header */
}

/* Add some space for the dropdown */
body {
    padding-top: 100px; /* Ensure this value accounts for the header height */
    overflow-x: hidden;
}

/* Keep the berry color if the dropdown is visible */
.donate-widget-dropdown:hover .donate-button,
.donate-widget-dropdown .dropdown-content {
    background-color: #A42361; /* Berry color when the menu is open */
    color: #ffffff; /* Keep white text */
}

.wp-block-button__link.wp-element-button.customize-unpreviewable {
    background-color: #ab306c;
    color: #ffffff;
}

/* Remove Header Blocks */
#page-header.entry-header.page-header {
    display: none;
}

/* Button Color */
.wp-block-buttons.has-custom-font-size.is-horizontal.is-content-justification-right.is-nowrap.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex .wp-block-button__link {
    background-color: #ab306c !important;
    color: #ffffff !important;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}

/* Button Hover Color */
.wp-block-buttons.has-custom-font-size.is-horizontal.is-content-justification-right.is-nowrap.is-layout-flex.wp-container-core-buttons-is-layout-1.wp-block-buttons-is-layout-flex .wp-block-button__link:hover {
    background-color: #348695 !important;
    color: #ffffff !important;
}

/* Click Outline for Accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 2px solid #348695 !important; /* Solid line with your desired color */
    outline-offset: 2px; /* Adjust the offset if needed */
    border-radius: 10px; /* Adjust the border radius for rounded corners */
}

/* Alignment of headers next to bubble images */
.wp-block-heading.alignwide {
    max-width: 600px; /* Adjust max-width as needed */
    margin-left: auto; /* Ensure it aligns correctly */
    margin-right: auto;
}

/* Button Wrapping on Mobile */
section#block-20.widget.widget_block, .wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link { flex: 1 1 auto; /* Allow buttons to grow and shrink */
    margin: 5px; /* Space between buttons */
    white-space: nowrap; /* Prevent text from wrapping */}

/* Wrapper to position the ellipses behind the blocks */
.ellipses-wrapper {
    position: relative; /* Allows positioning within this wrapper */
    z-index: -1; /* Ensures the ellipses are behind the existing blocks */
    height: 0; /* Prevents the wrapper from affecting spacing */
}

/* Common ellipse styling */
.ellipse {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
}

/* Blue ellipse styling */
.ellipse-blue {
    background-color: #6fa8dc;
    width: 400px;
    height: 400px;
    top: -150px; /* Adjust to position the ellipse */
    left: 100px;
		/* Jen make edits here. */
		opacity: 0.32; /* Optional: Adjust the opacity for a softer effect */
}

/* Pink ellipse styling */
.ellipse-pink {
    background-color: #A42361;
    width: 400px;
    height: 400px;
    top: 100px; /* Adjust to position the ellipse */
    left: 300px;
		/* Jen make edits here. */
		opacity: 0.32; /* Optional: Adjust the opacity for a softer effect */
}

.wp-block-cover > img {
  display: none;
}

@media (min-width: 480px) {
  .wp-block-cover > img {
     display: inherit;
   }
}