/* BMS Mega Menu - basic responsive grid */
.bms-mega-menu > li { position: relative; margin-left: 0 !important; }

/* Sub-content functionality - hide columns 2+ by default when tagged (desktop only) */
@media (min-width: 1201px) {
  .bmsmm-panel.has-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(n+2) {
      display: none;
      opacity: 0;
      transform: translateX(20px);
      transition: all 0.3s ease;
  }

  /* Adjust panel width when sub-content is hidden */
  .bmsmm-panel.has-sub-content .bmsmm-row .bmsmm-columns {
      grid-template-columns: 1fr !important;
      max-width: 300px; /* Adjust this value based on your content */
  }
}

/* Show all columns when .show-sub-content class is present (desktop only) */
@media (min-width: 1201px) {
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(n+2) {
      display: block;
      opacity: 1;
      transform: translateX(0);
      animation: slideInFromRight 0.4s ease-out;
  }

  /* Restore full width when sub-content is shown */
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns {
      grid-template-columns: repeat(var(--bmsmm-cols), 1fr) !important;
      max-width: none !important;
      animation: expandWidth 0.4s ease-out;
  }

  /* Add a subtle glow effect to the panel when sub-content is shown */
  .bmsmm-panel.has-sub-content.show-sub-content {
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
      animation: panelGlow 0.3s ease-out;
  }

  /* Staggered animation for each column */
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(2) {
      animation-delay: 0.1s;
  }
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(3) {
      animation-delay: 0.15s;
  }
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(4) {
      animation-delay: 0.2s;
  }
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col:nth-child(5) {
      animation-delay: 0.25s;
  }
}

/* Add smooth transition to all columns (desktop only) */
@media (min-width: 1201px) {
  .bmsmm-panel.has-sub-content .bmsmm-row .bmsmm-columns .bmsmm-col {
      transition: all 0.3s ease;
  }
}

/* Add visual indicator for items that show sub-panel */
.bmsmm-sub-indicator {
    color: #666;
    font-weight: bold;
    margin-left: 5px;
    transition: color 0.3s ease;
}

.bmsmm-show-sub-panel:hover .bmsmm-sub-indicator {
    color: #000;
}

.bms-mega-menu > li > a.menu-link { 
  padding: 14px 18px; 
}

.bmsmm-panel {
  position:absolute;
  top:100%;
  width:100%; 
  background:#D9D9D9; 
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:40px; 
  z-index: 99999;
  
  /* Animation properties - hidden by default */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-out;
}

/* Position all panels to start at the first parent menu item */
.bms-mega-menu > li.has-mega > .bmsmm-panel {
  right: auto;
  transform-origin: left top;
}

/* Use JavaScript to position panels relative to the first menu item */
.bms-mega-menu > li.has-mega > .bmsmm-panel {
  position: absolute;
  top: 100%;
}

.bmsmm-panel.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

/* Desktop hover only - disabled on mobile/tablet */
@media (min-width: 1201px) {
  .bms-mega-menu > li.has-mega:hover > .bmsmm-panel,
  .bms-mega-menu > li.is-open > .bmsmm-panel,
  .bmsmm-panel:not(.hidden) { 
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Mobile/Tablet - only show when explicitly opened */
@media (max-width: 1200px) {
  .bms-mega-menu > li.is-open > .bmsmm-panel,
  .bmsmm-panel:not(.hidden) { 
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Prevent clipping/z-index conflicts common in headers */
.site-header, header, nav, .main-header { overflow: visible; }
.bmsmm-panel { z-index: 99999; }

/* Keep <li> positioned for absolute child */
.menu-item.has-mega { position: relative; }

/* Let the panel size to its grid contents */
.menu-item.has-mega > .bmsmm-panel {
  position: absolute;
  left: 0;
  top: 100%;
  background: #D9D9D9;
  z-index: 99999;

  /* Ensure background expands to fit columns */
  width: max-content;                 /* grow to fit grid */
  /* ^ tweak 200px (column min) and 20px (gap) to your design */
  overflow: visible;
}

/* Keep panel open on hover and add a gap bridge - desktop only */
.menu-item.has-mega > .bmsmm-panel::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: -10px; 
  height: 10px;
  background: transparent;
}

/* .bmsmm-columns styles are now handled by .bmsmm-panel-two-rows specific rules */

.bmsmm-col .bmsmm-links { list-style:none; padding:0; margin:0; }

.bmsmm-col .bmsmm-links a { 
  text-decoration:none; 
  color:#000; 
  display:block; 
  padding: 11px 0; 
  line-height: 1.5;
  font-size: 12px;
  transition: text-decoration 0.3s ease;
}

/* Gray background always visible for the second column when it appears (showing more options) */
.bmsmm-panel.has-sub-content.show-sub-content .bmsmm-col:nth-child(2) .bmsmm-links {
  background-color: #C0C0C0;
  transition: background-color 0.3s ease;
  padding-left: 10px;
}

/* Move the second column closer to the first column */
.bmsmm-panel.has-sub-content.show-sub-content .bmsmm-col:nth-child(2) {
  margin-left: -35px;
  transition: margin-left 0.3s ease;
}

/* Gray background hover effect for li elements with bmsmm-show-sub-panel anchor */
.bmsmm-panel.show-sub-content .bmsmm-links li:has(.bmsmm-show-sub-panel) {
  background-color: #C0C0C0;
  transition: background-color 0.3s ease;
  border-radius: 4px;
  margin: 0 -10px;
  padding: 0 10px;
}

/* Gray background for the sub-indicator arrow when its parent li is hovered */
.bmsmm-panel.show-sub-content .bmsmm-links li:has(.bmsmm-show-sub-panel) .bmsmm-sub-indicator {
  background-color: #C0C0C0;
  transition: background-color 0.3s ease;
}

/* Use border-bottom instead of text-decoration to avoid affecting sub-indicator */
.bmsmm-col .bmsmm-links a {
  text-decoration: none !important;
  border-bottom: none !important;
}

.bmsmm-col .bmsmm-links a:hover .bmsmm-link-text,
.bmsmm-col .bmsmm-links a:focus .bmsmm-link-text {
  text-decoration: none !important;
  border-bottom: 0.5px solid currentColor !important;
  display: inline-block;
  position: relative;
  transition: border-bottom 0.3s ease;
}

/* Completely isolate the sub-indicator with absolute positioning */
.bmsmm-col .bmsmm-links a .bmsmm-sub-indicator {
  text-decoration: none !important;
  border-bottom: none !important;
  display: inline-block;
  position: relative;
  background: #D9D9D9; /* Match the panel background */
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Alternative approach: Use pseudo-element for underline */
.bmsmm-col .bmsmm-links a:hover .bmsmm-link-text::after,
.bmsmm-col .bmsmm-links a:focus .bmsmm-link-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.bmsmm-col .bmsmm-caption, .bmsmm-col .bmsmm-link-bold { font-size: 0.75rem !important; margin:0 0 8px; font-weight:600; }

.bmsmm-col.type-images .bmsmm-image { 
  display:block;
  text-decoration:none; 
  color:inherit; 
  overflow: hidden; /* Prevent image overflow */
  flex-shrink: 0; /* Prevent shrinking */
}

.bmsmm-col.type-images img { 
  width: 100%; 
  height: auto; 
  display: block;
  max-width: 100%; /* Ensure image doesn't exceed container width */
  max-height: 205px; /* Set maximum height to prevent overly tall images */
  object-fit: cover; /* Maintain aspect ratio while filling container */
  object-position: center; /* Center the image within its container */
  transition: transform 0.3s ease; /* Smooth transition for hover effects */
  margin-bottom: 11px;
}

/* Fix for image columns to maintain portrait aspect ratio */
.bmsmm-col.type-images {
  flex-shrink: 0; /* Prevent shrinking */
  flex-grow: 0; /* Prevent growing */
}

.bmsmm-col.type-images .bmsmm-img-caption {
  position: relative;
  color: #000;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 2 Images per row layout */
.bmsmm-images-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bmsmm-images-row {
  display: flex;
  gap: 20px;
}

.bmsmm-images-row .bmsmm-image {
  max-width: calc(50% - 5px);
}

.bmsmm-images-row .bmsmm-image img {
  width: 100%;
  height: auto;
  max-height: 253px;
  object-fit: cover;
}

/* Column span styles */
.bmsmm-col.span-2 {
  grid-column: span 2;
  flex: 0 0 calc(200% - 20px);
  width: calc(200% - 20px);
}

.bmsmm-col.span-3 {
  grid-column: span 3;
  flex: 0 0 calc(300% - 30px);
  width: calc(300% - 30px);
}

/* Two-row panel layout */
.bmsmm-panel-two-rows {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.bmsmm-panel-two-rows .bmsmm-row {
  display: flex;
  flex-direction: column;
}

.bmsmm-panel-two-rows .bmsmm-row .bmsmm-columns {
  display: flex;
  gap: 20px;
}

/* Touch-friendly */
.bms-mega-menu > li > a.menu-link { min-height: 44px; line-height: 44px; }


/* General responsive rules - now handled by two-row specific rules below */
/* Responsive */
@media (max-width: 1200px), (max-width: 992px), (max-width: 768px), (max-width: 520px) {
  .bmsmm-panel {
    position: static;
    box-shadow:none;
    width: 100% !important;
  }
}

/* Always reveal the panel on hover, regardless of UL class or [hidden] - desktop only */
.menu-item.has-mega { position: relative; }

/* Mobile menu width */
#mobile-menu {
  width: 425px !important;
}

#mobile-menu .side-panel-inner {
  padding: 0 !important;
}

/* Two-row layout column width control */
.bmsmm-panel-two-rows .bmsmm-row .bmsmm-columns {
  display: grid !important;
  gap: 20px;
  align-items: start;
}

.bmsmm-panel-two-rows .bmsmm-col {
  max-width: 200px; /* Set a reasonable max width for columns */
  width: 100%;
  overflow: hidden; /* Prevent content from expanding columns */
}

/* Image columns should maintain their aspect ratio */
.bmsmm-panel-two-rows .bmsmm-col.type-images {
  max-width: 205px;
}

.bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-columns {
  display: grid !important;
  gap: 20px !important;
  width: 100% !important;
}

.bmsmm-panel.has-sub-content.show-sub-content .bmsmm-row-1 .bmsmm-columns .bmsmm-col.type-images:nth-child(5) {
  margin-left: 10px; /* Pull the first image column closer to the second */
}

.bmsmm-panel-two-rows .bmsmm-col.type-images .bmsmm-image {
  max-width: 100%;
  width: 100%;
}

.bmsmm-panel-two-rows .bmsmm-col.type-images img {
  width: 100%;
  height: 2005px;
  object-fit: cover;
}

/* Text columns should wrap properly */
.bmsmm-panel-two-rows .bmsmm-col.type-links {
  max-width: 253px;
}

.bmsmm-panel-two-rows .bmsmm-col.type-links .bmsmm-links a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* Center align content in row 2 */
.bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col {
  text-align: center;
}

.bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-links {
  text-align: center;
}

.bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-links a {
  display: inline-block;
  text-align: center;
}

/* Responsive styles for two-row layout */
@media (max-width: 1200px), (max-width: 992px), (max-width: 768px), (max-width: 520px) {
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col.type-images {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col.type-images .bmsmm-image {
    position: relative !important;
    display: block !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col.type-images .bmsmm-image img {
    width: 100% !important;
    height: 205px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col.type-images .bmsmm-img-caption {
    position: static;
    color: #000 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  .bmsmm-col .bmsmm-links a {
    font-size: 14px !important;
  }

  .bmsmm-sub-indicator {
    display: none !important;
  }

  .menu-item.has-mega > .bmsmm-panel {
    padding: 20px !important;
  }
}


@media (max-width: 1200px) {
  .bmsmm-panel-two-rows .bmsmm-row .bmsmm-columns {
    gap: 15px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-col {
    max-width: 220px;
  }
  
  /* Row 1: 2 images side by side on large screens */
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    width: 100% !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }
  
  /* Row 2: Stack vertically on large screens */
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 992px) {
  .bmsmm-panel-two-rows .bmsmm-row .bmsmm-columns {
    gap: 12px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-col {
    max-width: 200px;
  }
  
  /* Row 1: 2 images side by side on medium screens */
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }
  
  /* Row 2: Stack vertically on medium screens */
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .bmsmm-panel-two-rows .bmsmm-row .bmsmm-columns {
    gap: 10px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-col {
    max-width: 180px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-col.type-images .bmsmm-img-caption {
    font-size: 11px;
  }
  
  /* Row 1: 2 images side by side on tablets */
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }
  
  /* Row 2: Stack vertically on tablets */
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile responsive styles for two-row layout */
@media (max-width: 520px) {
  .bmsmm-panel-two-rows {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row {
    display: flex;
    flex-direction: column;
  }
  
  /* Row 1: 2 images side by side on mobile using CSS Grid */
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-1 .bmsmm-col {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }
  
  /* Row 2: Stack vertically on mobile */
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-columns {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col {
    width: 100%;
    max-width: 100%;
  }
  
  .bmsmm-panel-two-rows .bmsmm-row-2 .bmsmm-col.type-links {
    max-width: 100%;
  }
}

/* Keyframe animations for sub-panel effects (desktop only) */
@media (min-width: 1201px) {
  @keyframes slideInFromRight {
    0% {
      opacity: 0;
      transform: translateX(30px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes expandWidth {
    0% {
      max-width: 300px;
    }
    100% {
      max-width: none;
    }
  }

  @keyframes panelGlow {
    0% {
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    100% {
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
  }

  /* Add a subtle fade-in effect for the tagged item indicator */
  .bmsmm-show-sub-panel .bmsmm-sub-indicator {
      animation: indicatorPulse 0.3s ease-out;
  }

  /* Underline tagged items when sub-panel is open */
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-show-sub-panel {
      text-decoration: underline;
  }

  /* Hover effect for tagged items when sub-panel is open */
  .bmsmm-panel.has-sub-content.show-sub-content .bmsmm-show-sub-panel:hover {
      text-decoration: underline;
      color: #333;
  }

  /* Make the anchor have a larger hover area */
.bmsmm-show-sub-panel {
  padding: 10px 15px !important;
  margin: -10px -15px !important;
  display: inline-block !important;
  position: relative !important;
}

  @keyframes indicatorPulse {
    0% {
      transform: scale(1);
      color: #666;
    }
    50% {
      transform: scale(1.1);
      color: #000;
    }
    100% {
      transform: scale(1);
      color: #000;
    }
  }
}