/* ========================================================
   1. GLOBAL HEADER CONTAINER & BACKGROUND MATCHING
   ======================================================== */

/* Ensure the full-width WildApricot header matches banner color (#0f172a) */
.zoneHeader,
.zoneHeaderContainer,
.headerContainer,
.zoneHeader .layoutContainer,
.zoneHeader .layoutRow,
.zoneHeader .layoutColumn,
.zoneHeader .WaGadgetCustomHtml {
  background-color: #0f172a !important;
  background-image: none !important;
  box-sizing: border-box !important;
}

/* ========================================================
   2. WES CUSTOM HEADER BANNER (HORIZONTAL 3-PART FLEX)
   ======================================================== */

.wes-header-banner {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 140px !important;
  padding: 15px 40px !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
background: transparent !important; /* Seamless match with outer container */
  background-image: none !important;
  border-bottom: 2px solid #c89d46 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
}

/* Faint engineering blueprint grid overlay */
.wes-banner-grid {
  display: none !important;
}

/* Left & Right Text Wings */
.wes-banner-side {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 2 !important;
}

.wes-side-left {
  align-items: flex-end !important;
  text-align: right !important;
  padding-right: 30px !important;
}

.wes-side-right {
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 30px !important;
}

.wes-banner-eyebrow {
  color: #e2b755 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.wes-banner-sub {
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* Fading Gold Horizontal Rule Lines */
.wes-banner-line {
  width: 100% !important;
  max-width: 200px !important;
  height: 1px !important;
  margin: 6px 0 !important;
}

.wes-side-left .wes-banner-line {
  background: linear-gradient(to left, #c89d46, transparent) !important;
}

.wes-side-right .wes-banner-line {
  background: linear-gradient(to right, #c89d46, transparent) !important;
}

/* Center Emblem Wrapper */
.wes-banner-logo-wrap {
  position: relative !important;
  z-index: 3 !important;
  width: 165px !important;
  height: 165px !important;
  min-width: 165px !important;
  max-width: 165px !important;
  min-height: 165px !important;
  max-height: 165px !important;
  flex: 0 0 165px !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  margin: 0 15px !important;
}

.wes-banner-link {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.wes-banner-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  -webkit-clip-path: circle(49% at 50% 50%) !important;
  clip-path: circle(49% at 50% 50%) !important;
  filter: drop-shadow(0 0 10px rgba(200, 157, 70, 0.5)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.wes-banner-logo:hover {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 16px rgba(226, 183, 85, 0.8)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.85)) !important;
}

/* ========================================================
   3. ICON CARDS & TEXT BLOCKS
   ======================================================== */

.wes-icon-text-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.wes-icon-headline {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

.wes-icon-sub {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #c89d46 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.wes-icon-card:hover .wes-icon-sub {
  color: #b3852b !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   4. FACEBOOK GADGET FORMATTING
   ======================================================== */

[class*="GadgetFacebook"],
[class*="gadgetFacebook"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

[class*="GadgetFacebook"] > div,
[class*="GadgetFacebook"] span,
[class*="GadgetFacebook"] iframe {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 500px !important;
}
/* ========================================================
   PC NAVIGATION ACTIVE STATE & HAMBURGER THEMING
   ======================================================== */

/* 1. Style active page menu link (Warm Gold instead of bright yellow) */
.WaGadgetMenuHorizontal .menuInner > ul > li.selected > a,
.WaGadgetMenuHorizontal .menuInner > ul > li.active > a,
.WaGadgetMenuHorizontal .menuInner > ul > li > a.selected,
.WaGadgetMenuHorizontal .menuInner > ul > li > a.active {
  color: #e2b755 !important;
  font-weight: 700 !important;
}

/* Subtle gold bottom accent under active menu link */
.WaGadgetMenuHorizontal .menuInner > ul > li.selected,
.WaGadgetMenuHorizontal .menuInner > ul > li.active {
  border-bottom: 2px solid #c89d46 !important;
}

/* 2. Style the desktop hamburger / overflow button (Gold instead of bright blue) */
.WaGadgetMenuHorizontal .menu-toggle,
.WaGadgetMenuHorizontal .icon-menu,
.WaGadgetMenuHorizontal [class*="toggle"],
.WaGadgetMenuHorizontal [class*="more"],
.WaGadgetMenuHorizontal .menuInner > ul > li.more > a,
.WaGadgetMenuHorizontal .menuInner > ul > li.hasSubMenu > a {
  color: #e2b755 !important;
  fill: #e2b755 !important;
  background-color: transparent !important;
}

/* 3. Style the dropdown popup if you click the desktop hamburger/more button */
.WaGadgetMenuHorizontal ul.firstLevel ul,
.WaGadgetMenuHorizontal .menuInner ul ul,
.WaGadgetMenuHorizontal .subMenu {
  background-color: #0f172a !important;
  border: 1px solid #c89d46 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.WaGadgetMenuHorizontal ul.firstLevel ul li a,
.WaGadgetMenuHorizontal .menuInner ul ul li a,
.WaGadgetMenuHorizontal .subMenu li a {
  color: #ffffff !important;
}

.WaGadgetMenuHorizontal ul.firstLevel ul li a:hover,
.WaGadgetMenuHorizontal .menuInner ul ul li a:hover,
.WaGadgetMenuHorizontal .subMenu li a:hover {
  background-color: rgba(200, 157, 70, 0.15) !important;
  color: #e2b755 !important;
}
/* ========================================================
   ACTIVE / SELECTED PAGE LINK TEXT (WARM GOLD OVERRIDE)
   ======================================================== */

/* Target all variations of the active/selected menu link and inner spans */
.WaGadgetMenuHorizontal li.selected,
.WaGadgetMenuHorizontal li.selected a,
.WaGadgetMenuHorizontal li.selected span,
.WaGadgetMenuHorizontal li.selected a span,
.WaGadgetMenuHorizontal a.selected,
.WaGadgetMenuHorizontal a.selected span,
.WaGadgetMenuHorizontal .menuInner .item.selected,
.WaGadgetMenuHorizontal .menuInner .item.selected a,
.WaGadgetMenuHorizontal .menuInner .item.selected span,
.WaGadgetMenuHorizontal [class*="selected"] > a,
.WaGadgetMenuHorizontal [class*="selected"] span {
  color: #e2b755 !important;
  font-weight: 700 !important;
}

/* Ensure hover state on active item stays gold */
.WaGadgetMenuHorizontal li.selected a:hover,
.WaGadgetMenuHorizontal li.selected a:hover span {
  color: #f3cf7a !important;
}
/* Recolor the mobile panel and all its internal wrappers to slate navy */
.WaGadgetMobilePanel,
.WaGadgetMobilePanel *,
.mobilePanel,
.mobilePanel *,
.mobilePanelContainer,
.mobilePanelContainer *,
.m-panel,
.m-panel * {
  background-color: #0f172a !important;
  background-image: none !important;
}

/* Add a gold accent bottom border to cleanly separate the bar */
.WaGadgetMobilePanel,
.mobilePanel,
.m-panel {
  border-bottom: 2px solid #c89d46 !important;
}

/* Set the hamburger icon and user icon to gold */
.WaGadgetMobilePanel a,
.WaGadgetMobilePanel button,
.WaGadgetMobilePanel span,
.WaGadgetMobilePanel i,
.mobilePanel a,
.mobilePanel button,
.mobilePanel span,
.mobilePanel i,
.m-panel a,
.m-panel button,
.m-panel span,
.m-panel i {
  color: #e2b755 !important;
  fill: #e2b755 !important;
}
/* ========================================================
   MEMBER PROFILE SECTION HEADINGS (GOLD THEMING)
   ======================================================== */

/* Target the h2/h3 and section titles in the member profile */
.WaGadgetMemberProfile h2,
.WaGadgetMemberProfile h3,
.WaGadgetMemberProfile .sectionTitle,
.WaGadgetMemberProfile .subSectionTitle,
.WaGadgetMemberProfile [class*="sectionHeader"],
.WaGadgetMemberProfile [class*="SectionTitle"],
.memberProfile h2,
.memberProfile h3,
.memberProfile .sectionTitle,
.memberProfile .subSectionTitle,
.memberProfile .innerSectionHeader {
  color: #c89d46 !important;
}

/* Also catch any standalone form headers on the profile page */
.pageContainer .memberProfile h3,
.pageContainer .WaGadgetMemberProfile h3 {
  color: #c89d46 !important;
}
/* ========================================================
   CONTACT PROFILE / MEMBER PROFILE TITLES (GOLD OVERRIDE)
   ======================================================== */

/* Target every potential heading and caption tag inside the Contact Profile system gadget */
.WaGadgetContactProfile h1,
.WaGadgetContactProfile h2,
.WaGadgetContactProfile h3,
.WaGadgetContactProfile h4,
.WaGadgetContactProfile h5,
.WaGadgetContactProfile h6,
.WaGadgetContactProfile legend,
.WaGadgetContactProfile .caption,
.WaGadgetContactProfile .title,
.WaGadgetContactProfile [class*="title"],
.WaGadgetContactProfile [class*="Title"],
.WaGadgetContactProfile [class*="header"],
.WaGadgetContactProfile [class*="Header"],
.contactProfile h1,
.contactProfile h2,
.contactProfile h3,
.contactProfile h4,
.contactProfile h5,
.contactProfile h6,
.contactProfile legend,
.contactProfile .caption,
.contactProfile .title {
  color: #c89d46 !important;
}

/* Catch dynamic member view wrappers */
[class*="ContactProfile"] h1,
[class*="ContactProfile"] h2,
[class*="ContactProfile"] h3,
[class*="ContactProfile"] h4,
[class*="ContactProfile"] h5,
[class*="ContactProfile"] h6,
[class*="ContactProfile"] legend,
[class*="contactProfile"] h1,
[class*="contactProfile"] h2,
[class*="contactProfile"] h3,
[class*="contactProfile"] h4,
[class*="contactProfile"] h5,
[class*="contactProfile"] h6,
[class*="contactProfile"] legend {
  color: #c89d46 !important;
}