/* =============================================================================
   PAGE HEADER REDESIGN
   Restructures header: greeting/title on left, bell + church logo + avatar on right
   Date: 2026-01-22
   Figma: https://www.figma.com/design/tg3U3gNcIYMn9aY9JYrIZc/AMFM-Portal?node-id=71-7015
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */
:root {
  --header-text-primary: #181d27;
  --header-text-secondary: #414651;
  --header-icon-muted: #a4a7ae;
  --header-border: rgba(0, 0, 0, 0.08);
  --header-avatar-size: 40px;
  --header-icon-size: 40px;
  --header-logo-height: 27px;
  --header-spacing-md: 8px;
  --header-spacing-lg: 16px;
}

/* -----------------------------------------------------------------------------
   Header Container Layout (when JS has initialized)
   ----------------------------------------------------------------------------- */
body.amfm-header-redesign .site-header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--header-spacing-lg);
  /* Match Bootstrap container responsive max-widths */
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* Match #content.site-content padding on regular pages */
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (min-width: 1560px) {
  body.amfm-header-redesign .site-header-container {
    padding-left: 65px !important;
    padding-right: 65px !important;
  }
}

/* LearnDash pages: Override to match their specific content area padding */
body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
body.amfm-header-redesign.single-sfwd-topic .site-header-container,
body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Responsive max-widths to match .container at each breakpoint */
@media (min-width: 576px) {
  body.amfm-header-redesign .site-header-container {
    max-width: 540px !important;
  }
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    max-width: 540px !important;
  }
}

@media (min-width: 768px) {
  body.amfm-header-redesign .site-header-container {
    max-width: 720px !important;
  }
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    max-width: 720px !important;
  }
}

@media (min-width: 992px) {
  body.amfm-header-redesign .site-header-container {
    max-width: 960px !important;
  }
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    max-width: 960px !important;
  }
}

@media (min-width: 1200px) {
  body.amfm-header-redesign .site-header-container {
    max-width: 1140px !important;
  }
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    max-width: 1140px !important;
  }
}

@media (min-width: 1400px) {
  body.amfm-header-redesign .site-header-container {
    max-width: 1320px !important;
  }
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    max-width: 1320px !important;
  }
}

/* -----------------------------------------------------------------------------
   Vertical Alignment: Align header with sidebar logo
   Add top padding to header, compensate by reducing main content top spacing
   Only applies on desktop (>800px) where sidebar is visible
   Excludes LearnDash lesson/topic/quiz pages which have their own layout
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 801px) {
  /* Push header content down to align with sidebar logo */
  body.amfm-header-redesign #masthead .site-header-container {
    padding-top: 40px;
  }
  
  /* Compensate by reducing main content top spacing */
  /* Exclude LearnDash pages (sfwd-lessons, sfwd-topic, sfwd-quiz) */
  body.amfm-header-redesign:not(.single-sfwd-lessons):not(.single-sfwd-topic):not(.single-sfwd-quiz) #primary.content-area,
  body.amfm-header-redesign:not(.single-sfwd-lessons):not(.single-sfwd-topic):not(.single-sfwd-quiz) .site-content #primary {
    margin-top: -40px;
  }
}

/* Hide the original AMFM logo in the HEADER only (not sidebar) */
body.amfm-header-redesign .site-header-container #site-logo {
  display: none !important;
}

/* Hide the sidebar toggle button (hamburger icon) */
body.amfm-header-redesign .bb-toggle-panel {
  display: none !important;
}

/* Hide the empty navigation area */
body.amfm-header-redesign #site-navigation {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Page Title / Greeting (Left Side)
   Now uses h1 for accessibility/SEO (updated 2026-01-28)
   ----------------------------------------------------------------------------- */
.amfm-page-title,
h1.amfm-page-title {
  flex: 1;
  font-family: 'Financier Display', Georgia, serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: var(--header-text-primary);
  margin: 0;
  padding: 0;
  /* Prevent text from wrapping and pushing layout */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile title (in content area) - hidden on desktop, shown on mobile */
.amfm-mobile-title,
h1.amfm-mobile-title {
  display: none;
}

/* -----------------------------------------------------------------------------
   Right Side Grouping (Bell, Church Logo, Avatar)
   ----------------------------------------------------------------------------- */
body.amfm-header-redesign #header-aside {
  flex-shrink: 0;
}

body.amfm-header-redesign #header-aside .header-aside-inner {
  display: flex !important;
  align-items: center !important;
  gap: var(--header-spacing-md) !important; /* 8px - tighter grouping per Figma */
}

/* -----------------------------------------------------------------------------
   Notification Bell
   ----------------------------------------------------------------------------- */
body.amfm-header-redesign .notification-wrap .notification-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-icon-size);
  height: var(--header-icon-size);
  padding: var(--header-spacing-md);
  border-radius: 6px;
}

body.amfm-header-redesign .notification-wrap .notification-link i {
  font-size: 20px;
  color: var(--header-icon-muted);
  transition: color 0.15s ease;
}

body.amfm-header-redesign .notification-wrap .notification-link:hover i {
  color: var(--header-text-secondary);
}

/* Hide the balloon tooltip - using native title instead */
body.amfm-header-redesign .notification-wrap .notification-link span[data-balloon] {
  position: static;
}

body.amfm-header-redesign .notification-wrap .notification-link span[data-balloon]::before,
body.amfm-header-redesign .notification-wrap .notification-link span[data-balloon]::after {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Church Logo (Injected by JS)
   ----------------------------------------------------------------------------- */
.amfm-church-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.amfm-church-logo img {
  height: var(--header-logo-height);
  width: auto;
  max-width: 150px; /* Prevent oversized logos from breaking layout */
  object-fit: contain;
}

/* -----------------------------------------------------------------------------
   User Avatar
   ----------------------------------------------------------------------------- */
body.amfm-header-redesign .user-wrap .user-link {
  display: flex;
  align-items: center;
  gap: 0; /* Remove gap, we only show avatar */
}

/* Hide the username text and dropdown arrow */
body.amfm-header-redesign .user-wrap .user-link .user-name,
body.amfm-header-redesign .user-wrap .user-link > i.bb-icon-angle-down {
  display: none !important;
}

/* Style the avatar */
body.amfm-header-redesign .user-wrap .user-link .avatar {
  width: var(--header-avatar-size) !important;
  height: var(--header-avatar-size) !important;
  border-radius: 9999px !important;
  border: 1px solid var(--header-border) !important;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   Responsive: Tablet (< 1024px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* LearnDash pages: Match content padding at this breakpoint */
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  .amfm-page-title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
  }
  
  :root {
    --header-logo-height: 24px;
    --header-avatar-size: 36px;
    --header-icon-size: 36px;
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Tablet/Mobile (< 768px)
   LearnDash pages: Match content padding
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Small Mobile (< 480px)
   LearnDash pages: Match content padding
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.amfm-header-redesign.single-sfwd-lessons .site-header-container,
  body.amfm-header-redesign.single-sfwd-topic .site-header-container,
  body.amfm-header-redesign.single-sfwd-quiz .site-header-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* -----------------------------------------------------------------------------
   Responsive: Mobile (< 800px)
   Complete redesign of mobile header with dark background banner.
   Structure: .bb-mobile-header-wrapper is the mobile header (separate from desktop)
   Date: 2026-01-22 | Updated: 2026-01-28 (breakpoint 768px -> 800px)
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
  
  /* -------------------------------------------------------------------------
     Hide Desktop Header Elements on Mobile
     The .site-header-container is the desktop header - hide it on mobile
     ------------------------------------------------------------------------- */
  /* Hide the entire site header on mobile (both regular and LearnDash pages) */
  #masthead .site-header,
  .site-header-container.flex.default-header,
  .site-header-container.flex,
  body.amfm-header-redesign .site-header-container,
  body.amfm-header-redesign.bb-sfwd-aside .site-header-container,
  body.bb-sfwd-aside #masthead .site-header {
    display: none !important;
  }
  
  /* Hide the sidebar toggle (doesn't work on mobile) */
  .bb-toggle-panel {
    display: none !important;
  }
  
  /* Hide desktop-only elements that might bleed through */
  .amfm-page-title,
  .amfm-church-logo {
    display: none !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Header Container - Dark Background
     Matches the sidebar dark theme gradient
     ------------------------------------------------------------------------- */
  .bb-mobile-header-wrapper {
    background: linear-gradient(
      160deg,
      #0b0b0d 0%,
      #0f0f11 20%,
      #2a2c30 45%,
      #0c0e12 100%
    ) !important;
  }
  
  .bb-mobile-header-wrapper .bb-mobile-header {
    background: transparent !important;
    padding: 12px 16px !important;
  }
  
  /* -------------------------------------------------------------------------
     Hamburger Menu Icon - White for dark background
     Selector: .bb-left-panel-mobile > .bb-icon-bars
     ------------------------------------------------------------------------- */
  .bb-mobile-header-wrapper .bb-left-panel-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }
  
  .bb-mobile-header-wrapper .bb-left-panel-mobile:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .bb-mobile-header-wrapper .bb-left-panel-mobile i.bb-icon-bars {
    color: #ffffff !important;
    font-size: 22px !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Page Title - Shows at top of content area (not in header bar)
     Injected by JS into #content, appears on cream background
     Added: 2026-01-28
     ------------------------------------------------------------------------- */
  .amfm-mobile-title,
  h1.amfm-mobile-title {
    display: block !important;
    color: var(--header-text-primary, #181d27) !important;
    font-family: 'Financier Display', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 36px !important;
    letter-spacing: -0.56px !important;
    margin: 0 !important;
    padding: 20px 16px 0 !important;
    background: transparent !important;
  }
  
  /* LearnDash pages: Add extra top padding to clear mobile header bar */
  body.single-sfwd-lessons .amfm-mobile-title,
  body.single-sfwd-topic .amfm-mobile-title,
  body.single-sfwd-quiz .amfm-mobile-title,
  body.bb-sfwd-aside .amfm-mobile-title {
    padding-top: 96px !important; /* Extra space to clear mobile nav bar */
  }
  
  /* Remove default content-area top padding on mobile - title provides spacing */
  .content-area {
    padding-top: 0 !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Logo - White AMFM logo on the right
     Use the logo image via background, hide the text
     ------------------------------------------------------------------------- */
  .bb-mobile-header-wrapper .mobile-logo-wrapper {
    order: 2 !important; /* Move to right side */
    flex: 0 0 auto !important; /* Don't stretch */
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }
  
  .bb-mobile-header-wrapper .mobile-logo-wrapper .site-title {
    margin: 0 !important;
  }
  
  .bb-mobile-header-wrapper .mobile-logo-wrapper .site-title a {
    display: block;
    width: 120px;
    height: 24px;
    background-image: url('/wp-content/uploads/2026/01/LogoAMFM.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    /* Invert to white for dark background */
    filter: brightness(0) invert(1);
    font-size: 0 !important; /* Hide text */
    color: transparent !important;
    text-indent: -9999px;
  }
  
  /* -------------------------------------------------------------------------
     Left Panel Icon Wrap - Flex layout for hamburger on left
     ------------------------------------------------------------------------- */
  .bb-mobile-header-wrapper .bb-left-panel-icon-wrap {
    order: 1 !important; /* Keep on left */
    flex: 0 0 auto !important;
  }
  
  /* -------------------------------------------------------------------------
     Hide the empty header-aside in mobile header
     (It's empty but takes up space)
     ------------------------------------------------------------------------- */
  .bb-mobile-header-wrapper .header-aside {
    display: none !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Panel Styling - Match dark theme
     The slide-out navigation panel
     ------------------------------------------------------------------------- */
  .bb-mobile-panel-wrapper {
    background: linear-gradient(
      160deg,
      #0b0b0d 0%,
      #0f0f11 20%,
      #2a2c30 45%,
      #0c0e12 100%
    ) !important;
  }
  
  .bb-mobile-panel-wrapper .bb-mobile-panel-inner {
    background: transparent !important;
  }
  
  /* Mobile panel header - user info area */
  .bb-mobile-panel-wrapper .bb-mobile-panel-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 16px !important;
  }
  
  .bb-mobile-panel-wrapper .bb-mobile-panel-header .user-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .bb-mobile-panel-wrapper .bb-mobile-panel-header .user-name {
    color: #f7f7f7 !important;
    font-weight: 600 !important;
  }
  
  .bb-mobile-panel-wrapper .bb-mobile-panel-header .my-account-link a {
    color: #94979c !important;
    font-size: 13px !important;
  }
  
  /* Close button */
  .bb-mobile-panel-wrapper .bb-close-panel {
    color: #94979c !important;
  }
  
  .bb-mobile-panel-wrapper .bb-close-panel:hover {
    color: #f7f7f7 !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Panel Navigation - Match sidebar styling
     ------------------------------------------------------------------------- */
  .bb-mobile-panel-wrapper .bb-primary-menu.mobile-menu {
    padding: 16px !important;
  }
  
  /* Menu section headers - Title case (not uppercase) to match desktop */
  .bb-mobile-panel-wrapper .bb-primary-menu li.bb-menu-section > .bb-menu-item {
    color: #cecfd2 !important; /* Same as menu items for better contrast */
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important; /* Title case, not uppercase - matches desktop */
    letter-spacing: 0 !important;
    padding: 4px 0 !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
  
  .bb-mobile-panel-wrapper .bb-primary-menu li.bb-menu-section:first-child > .bb-menu-item {
    margin-top: 0 !important;
  }
  
  /* Hide icons in section headers (matches desktop) */
  .bb-mobile-panel-wrapper .bb-primary-menu li.bb-menu-section > .bb-menu-item > i {
    display: none !important;
  }
  
  /* Regular menu items */
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > .bb-menu-item,
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #cecfd2 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    margin: 2px 0 !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
  }
  
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > .bb-menu-item:hover,
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f7f7f7 !important;
  }
  
  /* Active menu item */
  .bb-mobile-panel-wrapper .bb-primary-menu li.current-menu-item > .bb-menu-item,
  .bb-mobile-panel-wrapper .bb-primary-menu li.current-menu-item > a,
  .bb-mobile-panel-wrapper .bb-primary-menu li.current_page_item > .bb-menu-item,
  .bb-mobile-panel-wrapper .bb-primary-menu li.current_page_item > a {
    background: linear-gradient(
      90deg,
      rgba(192, 120, 88, 0.35) 0%,
      rgba(104, 59, 39, 0.35) 100%
    ) !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  
  /* -------------------------------------------------------------------------
     Mobile Menu Icons - Match desktop sidebar custom icons
     Uses the same SVG icons via background-image technique
     ------------------------------------------------------------------------- */
  
  /* Base icon styling - hide default icon font, use custom SVG */
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file,
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > a > i.bb-icon-file {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0 !important; /* Hide the icon font */
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }
  
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file::before,
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > a > i.bb-icon-file::before {
    content: none !important;
    display: none !important;
  }
  
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .bb-primary-menu li:not(.bb-menu-section) > a > i.bb-icon-file::after {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.8;
  }
  
  /* Individual menu item icons - same as desktop sidebar */
  /* NOTE: Mobile menu uses CLASS selectors (.menu-item-XXXX), not ID selectors */
  
  /* Home */
  .bb-mobile-panel-wrapper .menu-item-2281 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2281 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/home.svg') !important;
  }
  
  /* HeartChart Dashboard */
  .bb-mobile-panel-wrapper .menu-item-2320 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2320 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/grid.svg') !important;
  }
  
  /* AMFM Training */
  .bb-mobile-panel-wrapper .menu-item-2292 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2292 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/book-open.svg') !important;
  }
  
  /* Our Marriage Champions (menu-item-12139) */
  .bb-mobile-panel-wrapper .menu-item-12139 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-12139 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/trophy.svg') !important;
  }
  
  /* Loveology */
  .bb-mobile-panel-wrapper .menu-item-2325 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2325 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/loveology.svg') !important;
  }
  
  /* Assessments */
  .bb-mobile-panel-wrapper .menu-item-2324 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2324 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/list.svg') !important;
  }
  
  /* Small Groups */
  .bb-mobile-panel-wrapper .menu-item-2323 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2323 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/intersect-three.svg') !important;
  }
  
  /* Date Night Kits */
  .bb-mobile-panel-wrapper .menu-item-2322 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2322 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/heart.svg') !important;
  }
  
  /* Speakers Collective */
  .bb-mobile-panel-wrapper .menu-item-2333 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2333 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/share.svg') !important;
  }
  
  /* Counseling Network */
  .bb-mobile-panel-wrapper .menu-item-2332 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2332 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/users-three.svg') !important;
  }
  
  /* WeDo */
  .bb-mobile-panel-wrapper .menu-item-2334 > .bb-menu-item > i.bb-icon-file::after,
  .bb-mobile-panel-wrapper .menu-item-2334 > a > i.bb-icon-file::after {
    background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/wedo.svg') !important;
  }
  
  /* Contact Us - uses img instead of i, style to match */
  .bb-mobile-panel-wrapper .menu-item-3398 > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .bb-mobile-panel-wrapper .menu-item-3398 > a > img {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(0.8) !important;
    margin: 0 !important;
  }
}

/* =============================================================================
   END: Page Header Redesign
   ============================================================================= */