/* ---------------------------------------------------------------------------
   Header layout fixes.

   Loaded after halpes-original.css and its responsive companion, because
   halpes.css is registered *before* them and cannot override what they declare.
--------------------------------------------------------------------------- */

/* Neither wrapper has a rule in the theme, yet their children are floated, so
   they collapse and the floats escape. flow-root contains them. */
.main-header-two__top,
.main-menu-three__container {
    display: flow-root;
}

/* ---------------------------------------------------------------------------
   Header 2 top bar.

   The theme floats the logo, contact list and Donate button, sized for its demo
   address. A real address makes the three contact items total ~1016px against
   905px of space, so the last one wrapped to a second row and pushed the Donate
   button below it — a 320px bar instead of 138px, with the nav over the hero.

   Flexbox puts them back on one row. The original's vertical spacing is kept
   exactly: the button's 55px top padding is what lands its lower edge on the
   nav bar (which is pulled up 39px), giving the attached look. Only the address
   is allowed to shrink and wrap.

   Scoped to >=992px; below that the theme hides the contact info, and an
   unscoped display:flex would bring it back.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .main-header-two__top {
        display: flex;
        align-items: flex-start;
        min-height: 138px;
    }

    .main-header-two__logo,
    .main-header-two__contact-info,
    .main-header-two__contact-list,
    .main-header-two__btn {
        float: none;
    }

    .main-header-two__logo {
        flex: 0 0 auto;
    }

    .main-header-two__contact-info {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        max-width: none;
        /* Less than the theme's 145px: the extra width is what stops a real
           address wrapping onto three lines. */
        margin-left: 60px;
    }

    .main-header-two__contact-list {
        display: flex;
        align-items: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Phone and email keep their width; only the address shrinks and wraps. */
    .main-header-two__contact-list li {
        flex: 0 0 auto;
    }

    .main-header-two__contact-list li:last-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Anchored to the bottom of the bar rather than given the theme's fixed
       55px top padding. The nav below is pulled up 39px, so a 39px bottom
       padding lands the button's lower edge exactly on the nav — the attached
       look of the original — and it holds even when a long address makes the
       bar taller than the 138px the theme assumes. */
    .main-header-two__btn {
        flex: 0 0 auto;
        margin-left: 32px;
        align-self: flex-end;
        padding-top: 0;
        padding-bottom: 39px;
    }
}

/* ---------------------------------------------------------------------------
   Header 2 social icons.

   halpes-original-responsive.css overrides the social chips for this header to
   `background: rgba(255,255,255,.12); color: #fff`, which only reads on a dark
   bar. Header 2's nav strip is white, so the icons were white-on-white and
   effectively invisible.

   The original renders them with the default light treatment — a dark glyph on
   a pale mint circle. Measured on halpes-nextjs.vercel.app/home2:
   colour rgb(31,34,48) on rgb(229,238,236).
--------------------------------------------------------------------------- */
.main-header-two .main-menu__right-social a {
    background-color: #e5eeec;
    color: var(--thm-black);
}

.main-header-two .main-menu__right-social a:hover {
    background-color: var(--thm-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Header 2 menu row.

   The theme spaces menu items 64px apart, which suits its six-item demo menu
   (Home, Pages, Donations, Events, News, Contact). This site has eight, so the
   row filled completely: the social icons sat flush against "Contact" and the
   right-hand block ran to 1412px inside a container ending at 1385 — a 27px
   overflow.

   Tighter spacing brings the row back inside, and an auto left margin pushes
   the social/search block to the right edge so the leftover space becomes the
   gap the original shows.

   Also applies to the sticky header, which reuses .main-menu__two.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .main-menu__two .main-menu__list > li + li {
        margin-left: 44px;
    }

    .main-menu__two .main-menu__right {
        margin-left: auto;
    }
}