/* PIOUS Foundation — assets/css/header-nav.css */
/* 
  STRUCTURAL UNDERSTANDING (from reading oxpins.css source):
  
  .main-menu__wrapper
    └── .main-menu__wrapper-inner  (flex row)
          ├── .main-menu__left     ← LOGO lives here (width:9%, margin-right:157px in oxpins)
          └── .main-menu__right    ← width:91%
                ├── .main-menu__right-top    ← info bar (address, social, tagline)
                └── .main-menu__right-bottom ← navy nav bar (menu list + search + btn)
  
  .stricky-header clones the full .main-menu__wrapper-inner
  
  GOALS:
  1. Logo stays in .main-menu__left but sized correctly (not overflowing into top bar)
  2. .main-menu__left aligns vertically centered against BOTH rows of .main-menu__right
  3. Sticky: hide top bar, show only nav bar — compact height
  4. Mobile: logo + toggler side by side, properly sized
  5. .main-menu__btn :before pseudo overflow fix (it extends right to infinity)
*/


/* ============================================================
   WHOLE HEADER WRAPPER
   ============================================================ */

.main-header {
  background-color: var(--color-white) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative;
}

.main-menu__wrapper {
  padding-left: var(--space-lg) !important;
  padding-right: 0 !important;         /* right side: btn handles its own edge */
}

/* Flex row: logo-left + right-column */
.main-menu__wrapper-inner {
  display: flex !important;
  align-items: stretch !important;     /* both columns fill the same total height */
  justify-content: flex-start !important;
}

/* Kill the decorative shape — it positions absolutely and fights layout */
.main-menu__shape-1 {
  display: none !important;
}


/* ============================================================
   LEFT COLUMN — LOGO
   oxpins hardcodes width:9% and margin-right:157px for a tiny
   placeholder logo. We remove both and let the logo be natural width.
   We align it centered against the full height of the right column.
   ============================================================ */

.main-menu__left {
  width: auto !important;
  margin-right: var(--space-lg) !important;   /* clean gap between logo and right col */
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;             /* vertically center in the full header height */
  padding-right: 0 !important;
}

.main-menu__logo {
  display: flex !important;
  align-items: center !important;
}

/* THE KEY FIX: hard cap the logo so it never taller than the header */
.main-menu__logo img {
  height: 52px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
}


/* ============================================================
   RIGHT COLUMN
   ============================================================ */

.main-menu__right {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;          /* stacks top-bar above nav-bar */
}


/* ============================================================
   TOP INFO BAR
   ============================================================ */

.main-menu__right-top {
  border-bottom: 1px solid var(--color-border);
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background-color: var(--color-white);
}

.main-menu__right-top-address-list li .icon span {
  color: var(--color-accent) !important;
}

.main-menu__right-top-address-list li .content p {
  font-family: var(--font-body);
  color: var(--color-body);
  font-size: var(--text-xs) !important;
}

.main-menu__right-top-address-list li .content h5 {
  font-family: var(--font-heading);
}

.main-menu__right-top-address-list li .content h5 a {
  color: var(--color-primary) !important;
  font-weight: 700;
}

.main-menu__right-top-address-list li .content h5 a:hover {
  color: var(--color-accent) !important;
}

.main-menu__right-top-social a {
  background-color: var(--color-light) !important;
  color: var(--color-primary) !important;
}

.main-menu__right-top-social a:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.main-menu__right-top-social a:after {
  background-color: var(--color-accent) !important;
}

.main-menu__volunteers-icon {
  background-color: var(--color-accent) !important;
}

.main-menu__volunteers-text {
  font-family: var(--font-accent) !important;
  font-size: var(--text-xl) !important;
  color: var(--color-primary) !important;
}

.main-menu__volunteers-text a {
  color: var(--color-primary) !important;
}

.main-menu__volunteers-text a:hover {
  color: var(--color-accent) !important;
}


/* ============================================================
   NAV BAR ROW — navy bar with menu + search + button
   ============================================================ */

.main-menu__right-bottom {
  background-color: var(--color-primary) !important;
  border-top-left-radius: 0 !important;
  border-radius: 0 !important;
  padding-left: var(--space-md) !important;
  padding-right: 0 !important;       /* button handles right edge */
  display: flex !important;
  align-items: center !important;
  min-height: 58px;
}


/* ============================================================
   NAV LINKS
   ============================================================ */

.main-menu .main-menu__list > li > a {
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li.current-menu-ancestor > a,
.main-menu .main-menu__list > li.current-menu-item > a,
.main-menu .main-menu__list > li.current_page_item > a,
.main-menu .main-menu__list > li:hover > a {
  color: var(--color-accent) !important;
}

/* Tighten spacing between nav items so long menus don't wrap */
.main-menu .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li {
  margin-left: 28px !important;       /* oxpins default is 55px — too wide */
}

.main-menu .main-menu__list > li,
.stricky-header .main-menu__list > li {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.main-menu .main-menu__list > li > ul {
  background-color: var(--color-white) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border) !important;
}

.main-menu .main-menu__list > li > ul > li > a {
  font-family: var(--font-heading) !important;
  color: var(--color-body) !important;
  font-weight: 600 !important;
}

.main-menu .main-menu__list > li > ul > li:hover > a {
  background-color: var(--color-accent-light) !important;
  color: var(--color-primary) !important;
}


/* ============================================================
   SEARCH + DONATE BUTTON
   ============================================================ */

.main-menu__search {
  color: var(--color-white) !important;
}

.main-menu__search:hover {
  color: var(--color-accent) !important;
}

/* 
  THE OVERFLOW FIX: .main-menu__btn has a :before pseudo that extends
  right: -10000000000000px — this makes the gold area bleed off screen.
  We clip it at the parent and constrain the button properly.
*/
.main-menu__btn-box {
  overflow: hidden !important;         /* clips the infinite :before pseudo */
  flex-shrink: 0 !important;
}

.main-menu__btn {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  white-space: nowrap !important;
}

.main-menu__btn:hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}

.main-menu__btn:before {
  background-color: var(--color-accent) !important;
}

.main-menu__btn:hover:before {
  background-color: var(--color-white) !important;
}

.main-menu__btn span {
  color: inherit !important;
}


/* ============================================================
   STICKY HEADER
   Only the nav bar — no top info bar.
   Logo from .main-menu__left is still cloned by Oxpins JS.
   ============================================================ */

.stricky-header {
  background-color: var(--color-primary) !important;
  box-shadow: 0 4px 20px rgba(2, 1, 73, 0.20) !important;
}

/* Hide the info bar completely in sticky */
.stricky-header .main-menu__right-top {
  display: none !important;
}

/* Compact single-row layout for sticky */
.stricky-header .main-menu__wrapper-inner {
  align-items: center !important;
}

/* Logo in sticky: sized down, white filter since bg is navy */
.stricky-header .main-menu__left {
  display: flex !important;
  align-items: center !important;
  margin-right: var(--space-md) !important;
}

.stricky-header .main-menu__logo img {
  height: 40px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  /* Invert to white for navy background.
     If logo-2.png is already white, remove this line. */
  filter: brightness(0) invert(1);
}

/* Override filter if white logo file is already used */
.stricky-header .main-menu__logo img[src*="logo-2"],
.stricky-header .main-menu__logo img[src*="white"] {
  filter: none !important;
}

/* The nav bar in sticky: no extra wrapper padding needed */
.stricky-header .main-menu__right-bottom {
  background-color: transparent !important;  /* sticky bg is already navy */
  border-radius: 0 !important;
  padding-left: 0 !important;
  min-height: 0 !important;
}

.stricky-header .main-menu__right {
  display: block !important;
}

/* Sticky nav links */
.stricky-header .main-menu__list > li > a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.stricky-header .main-menu__list > li.current > a,
.stricky-header .main-menu__list > li.current_page_item > a,
.stricky-header .main-menu__list > li:hover > a {
  color: var(--color-accent) !important;
}

.stricky-header .main-menu__search {
  color: var(--color-white) !important;
}

.stricky-header .main-menu__search:hover {
  color: var(--color-accent) !important;
}

.stricky-header .main-menu__btn-box {
  overflow: hidden !important;
}

.stricky-header .main-menu__btn {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.stricky-header .main-menu__btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-white) !important;
}


/* ============================================================
   MOBILE — max-width: 1199px
   Oxpins hides .stricky-header on mobile (display:none).
   The real header shows. .main-menu__left has the logo.
   .mobile-nav__toggler is the hamburger — it's inside .main-menu__right-bottom.
   ============================================================ */

@media (max-width: 1199px) {
  .main-menu__wrapper {
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
  }

  /* Wrapper becomes a single flex row */
  .main-menu__wrapper-inner {
    align-items: center !important;
    min-height: 70px;
  }

  /* Logo: constrained so hamburger is always visible */
  .main-menu__left {
    margin-right: auto !important;     /* push everything else to the right */
    flex-shrink: 1 !important;
    max-width: 180px !important;
  }

  .main-menu__logo img {
    height: 42px !important;
    max-width: 160px !important;
  }

  /* Right column on mobile: flex row so toggler sits right */
  .main-menu__right {
    display: flex !important;
    align-items: center !important;
    flex: none !important;             /* don't stretch — take only what's needed */
    width: auto !important;
  }

  /* Hide the info bar on mobile */
  .main-menu__right-top {
    display: none !important;
  }

  /* Nav bar on mobile: transparent, just holds the toggler */
  .main-menu__right-bottom {
    background-color: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide desktop nav list */
  .main-menu__right-bottom .main-menu__list {
    display: none !important;
  }

  /* Hide desktop-only utilities */
  .main-menu__search-box,
  .main-menu__btn-box,
  .main-menu__cat-box {
    display: none !important;
  }

  /* Hamburger toggler — always visible, gold background */
  .main-menu .mobile-nav__toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: var(--color-white) !important;
    background-color: var(--color-accent) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .main-menu .mobile-nav__toggler:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
  }
}

@media (max-width: 575px) {
  .main-menu__logo img {
    height: 36px !important;
    max-width: 130px !important;
  }

  .main-menu .mobile-nav__toggler {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}


/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */

.mobile-nav__content {
  background-color: var(--color-primary) !important;
}

.mobile-nav__content .logo-box img {
  height: 48px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

.mobile-nav__close {
  color: var(--color-white) !important;
}

.mobile-nav__close:hover {
  color: var(--color-accent) !important;
}

.mobile-nav__content .main-menu__list > li > a {
  font-family: var(--font-heading) !important;
  color: var(--color-white) !important;
  font-weight: 600 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.mobile-nav__content .main-menu__list > li > a.expanded {
  color: var(--color-accent) !important;
}

.mobile-nav__content .main-menu__list > li > a > button {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

.mobile-nav__content .main-menu__list > li > a > button.expanded {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}

.mobile-nav__social a {
  color: var(--color-white) !important;
}

.mobile-nav__social a:hover {
  color: var(--color-accent) !important;
}

.mobile-nav__contact li a {
  color: var(--color-white) !important;
}

.mobile-nav__contact li a:hover {
  color: var(--color-accent) !important;
}

.mobile-nav__contact li > i {
  background-color: var(--color-accent) !important;
  color: var(--color-primary) !important;
}


/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.search-popup__overlay {
  background-color: var(--color-primary) !important;
  opacity: 0.95 !important;
}

.search-popup__content form {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg);
}

.search-popup__content .thm-btn {
  background-color: var(--color-accent) !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
  width: 68px;
  height: 68px;
}

.search-popup__content .thm-btn:hover {
  background-color: var(--color-primary) !important;
}