/* change the look of menu items log in and open account | #25444781-hc VG */
li#menu-item-184, li#menu-item-5684, li#menu-item-1750
{
    border: 1px solid #162987;
    background-color: #162987;
}
li#menu-item-184 a, li#menu-item-5684 a, li#menu-item-1750 a
{
    color: #ffffff;
}
li#menu-item-11816, li#menu-item-9036, li#menu-item-9039 
{
    background-color: #009039;
    border: 1px solid #009039;
}
li#menu-item-11816 a, li#menu-item-9036 a, li#menu-item-9039 a 
{
    color: #ffffff;
}

/* remove search menu item | #25444781-hc VG */
.header-search-container.has-border-radius {
    display: none;
}

/* Adjust max logo width / NL-25364064-HC */
.custom-logo {
  max-width: 320px;
}

/*25336611-hc hide page titles*/
.page #primary-header {
    display: none;
}

/*Change font size of button | SN-25495033-hc*/
a.wp-block-button__link.has-black-color.has-vivid-green-cyan-background-color.has-text-color.has-background {
    font-size: 18px;
}

/* RESPONSIVE HEADERS */
/* 1. Global rules to prevent word splitting */
h2.wp-block-heading.has-custom-font {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* 2. Triggers on all tablets and mobile devices (including landscape mode) */
@media (max-width: 1024px) {
  h2.wp-block-heading.has-custom-font {
    /* 
       The math ceiling: It will calculate 7.5% of the screen width, 
       but will NEVER exceed 48px. 
    */
    font-size: min(48px, 7.5vw) !important; 
    
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Removes entry footer content from Posts 28139087hc */ 
.single-post .entry-footer {
  display: none;
}

/* Main Menu Styles */
#menu-primary.nav-bar .menu-item {
  font-size: 0.9rem;
  font-weight: normal;
}
/* Menu Item BG */
.menu-item-13252 a, .menu-item-13253 a {
  background: #7fb3d9;
  color: #ffffff!important;
}
.menu-item-13252 a:hover, .menu-item-13253 a:hover {
  background: #a1c7e3;
  color: #ffffff!important;
}

/* CTA Button styles */
.cta-button a {
  padding: 10px 20px;
  text-transform: none;
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
}

/* Partner Logos */
.partner-logos img {
  width: 200px;
}

/* Roundbox */
/* 1. Set up the column container as a vertical flexbox */
.roundbox-container .roundbox-column {
    display: flex;
    flex-direction: column;
}

/* 2. Position the image wrapper and shift it down */
.roundbox-column .circle-pic {
    position: relative;
    z-index: 2; /* Ensures the image sits ON TOP of the paragraph */
    
    /* Pull the image down by roughly 1/3 of its height (150px * 1/3 = 50px) */
    margin-bottom: -50px; 
}

/* 3. Style the paragraph to accommodate the overlapping image */
.roundbox-column .roundbox-1 {
    flex-grow: 1;
    position: relative;
    z-index: 1; /* Sits underneath the overlapping image */
    
    /* Flex alignment to keep text looking great */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Add extra top padding so the overlapping image doesn't block your text */
    padding-top: 60px; 
    margin-bottom: 0;
}
.roundbox-1 {
  background: #b1cee2;
  padding: 50px 10px;
  border: 1px solid #ffffff;
  border-radius: 25px;
}

/* STACKS */
/* Target the container to make it a vertical flexbox */
.stack-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between; /* Distributes items evenly */
    
    /* CRITICAL: The container must have a defined height to distribute space */
    min-height: 300px; /* Adjust this value to fit your design */
}

/* Ensure we only target the direct child stack-items */
.stack-container > .stack-item {
    margin: 0; /* Clear default margins that might interfere */
}

/* Site Header z-index */
.site-header {
  z-index: 999;
}

/* Fix horizontal overflow */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Match Image Height to Column */
@media (min-width: 782px) {
    /* 1. Stretch columns to match the tallest element */
    .sync-image-height {
        align-items: stretch !important;
    }

    /* 2. Target the text column (the column that does NOT have a figure) */
    .sync-image-height > .wp-block-column:not(:has(figure)) {
        flex: 1 1 60% !important; /* Text gets 60% of the width */
    }

    /* 3. Target the image column (the column that DOES have a figure) */
    .sync-image-height > .wp-block-column:has(figure) {
        flex: 0 0 40% !important; /* Image gets 40% of the width */
        position: relative;
    }

    /* 4. Set up absolute positioning for the figure */
    .sync-image-height > .wp-block-column:has(figure) figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    /* 5. Fill the column, preserve aspect ratio, crop the overflow */
    .sync-image-height > .wp-block-column:has(figure) img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
        object-position: center !important; 
    }

    /* 6. Dynamically align the image to the outside edge */
    
    /* If the image column is on the LEFT */
    .sync-image-height > .wp-block-column:first-child:has(figure) img {
        object-position: left center;
    }
    
    /* If the image column is on the RIGHT */
    .sync-image-height > .wp-block-column:last-child:has(figure) img {
        object-position: right center;
    }
}

/* Reverse Columns on Mobile */
@media (max-width: 767px) {
  .column-reverse {
    display: flex;
    flex-direction: column-reverse; /* Flips the visual layout entirely */
  }
}