/* ---------------------------------------------------------------------
   Re:BUiLD fixes — November 2026.

   These rules live in their own file on purpose. custom-style.css has a
   doubled opening brace at around line 19367 (".site-nav .site-nav-menu
   ul:focus{ {", added August 2024) plus an earlier unbalanced brace, so
   roughly 50 rules near the end of that file are swallowed by the parser
   and never apply. Anything added there would be dead on arrival.
   --------------------------------------------------------------------- */

/* Mobile menu: the main menu was placed twice in the overlay region, so
   every item appeared twice. The duplicate block is now disabled in Block
   Layout; this is a safety net in case it is ever switched back on. */
.site-nav-large #block-businessgroup-zymphonies-theme-main-menu {
    display: none;
}

/* Mobile menu: submenus are Bootstrap dropdowns, which never open on a
   touch screen. Show them as an indented list so every page stays
   reachable even if JavaScript does not run. */
.site-nav-large .dropdown-menu {
    display: block;
    position: static;
    float: none;
    width: auto;
    margin: 0 0 0 20px;
    padding: 0;
    border: 0;
    background-color: transparent;
    box-shadow: none;
}
.site-nav-large .dropdown-menu li a {
    font-size: 18px;
}
.site-nav-large .dropdown-menu .dropdown-menu li a {
    font-size: 16px;
}

/* Where JavaScript runs, those submenus collapse and open on tap. */
.site-nav-large.js-accordion .dropdown-menu {
    display: none;
}
.site-nav-large.js-accordion li.is-open > .dropdown-menu {
    display: block;
}
.site-nav-large.js-accordion .dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    border-top: 6px solid currentColor;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    vertical-align: middle;
}
.site-nav-large.js-accordion li.is-open > .dropdown-toggle::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* "New" flag on the Partners' Resources menu item. Remove this block when
   the page is no longer new. */
.site-nav a[href="/partners-resources"]::after,
.site-nav-large a[href="/partners-resources"]::after {
    content: "NEW";
    display: inline-block;
    margin-left: 9px;
    padding: 1px 6px;
    background-color: #ffffff;
    color: #D45840;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.6;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Sideways scroll on phones — November 2026.

   Bootstrap rows carry negative side margins that are wider than the
   padding of the containers holding them, so rows measure about 400px
   inside a 390px screen and push the page 5px wider than the viewport.
   body already clips this, but html does not, so some phones still scroll
   sideways into a blank strip and the menu button drifts off screen.
   Clipping at the root stops that. Limited to phone and tablet widths so
   desktop scrolling behaviour is untouched.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    html {
        overflow-x: hidden;
    }
}

/* ---------------------------------------------------------------------
   Remove the sideways overflow at its source, rather than hiding it.
   Bootstrap's largest gutter (g-5 / gx-5 = 3rem) gives a row negative
   side margins of 24px, but the containers holding those rows only have
   12px of padding. The row therefore hangs 12px past its container on
   each side and makes the page wider than the screen. Clipping at the
   root hides this in most browsers, but Safari does not reliably honour
   overflow-x on the html element, so the blank strip and the drifting
   menu button come back on iPhones.
   Capping the horizontal gutter to 1.5rem on phones and tablets makes
   the negative margins match the container padding exactly, so nothing
   overhangs. Only the largest gutter is capped; rows that deliberately
   set no gutter are left alone. Columns are stacked full width at these
   sizes, so the visual change is negligible.
   --------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .g-5,
    .gx-5,
    .gx-lg-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* ---------------------------------------------------------------------
   Blog listing, fourth author.
   Authors one to three come from plain image fields, so the view prints a
   bare <img> and the name sits beside it. The fourth author is a Media
   reference, so the view prints the image inside the media entity's own
   wrappers. Those wrappers are block level, which drops the picture onto
   its own line and leaves the name stranded underneath.
   Making the wrappers inline restores the same flow as the other three.
   The media field label keeps its visually-hidden positioning, so it
   stays hidden.
   --------------------------------------------------------------------- */
.press-image3 > div,
.press-image3 > div div {
    display: inline;
}