/**
 * Podcaster Plus Mega Menu Styles
 *
 * Accessible and responsive mega menu implementation
 * for use with GenerateBlocks Elements
 *
 * @package PP\custom_functionality
 * @since 0.3.0
 */

/* ============================================
   Base Mega Menu Styles
   ============================================ */

/* Ensure proper positioning context */
.main-navigation .inside-navigation {
  position: static;
}

.main-navigation .menu > li {
  position: static;
}

/* Mega menu items need relative positioning */
.main-navigation .pp-mega-item {
  position: relative;
}

/* The anchor tag needs relative positioning for the bridge pseudo-element */
.main-navigation .pp-mega-item > a {
  position: relative;
}

/* Mega menu wrapper - hidden by default */
.pp-mega-menu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--pp-mega-menu-bg, #ffffff);
  box-shadow: var(--pp-mega-menu-shadow, 0 4px 20px rgba(0, 0, 0, 0.1));
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Container for centering content */
.pp-mega-menu-container {
  max-width: var(--pp-mega-menu-max-width, 1200px);
  margin: 0 auto;
  padding: var(--pp-mega-menu-padding, 2rem);
}

/* Inner wrapper for GenerateBlocks content */
/* .pp-mega-menu-inner {
  position: relative;
  width: 100%;
} */

/* ============================================
   Hover and Active States
   ============================================ */

/* Create invisible bridge to prevent gap hover issues - using ::before to avoid conflict with arrow ::after */
.main-navigation .pp-mega-item > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 29px;
  height: 17px;
  z-index: 9998; /* Just below the mega menu */
  pointer-events: auto;
  background: transparent;
}

/* Show mega menu on hover */
.main-navigation .menu-item:hover .pp-mega-menu-wrapper,
.main-navigation .menu-item:focus-within .pp-mega-menu-wrapper,
.pp-mega-menu-wrapper.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Active state for trigger link */
/* .main-navigation .pp-mega-item > a[aria-expanded="true"] {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--global-palette-color3, #333333);
} */

/* Add arrow indicator for mega menu items */
.main-navigation .pp-mega-item > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.main-navigation .pp-mega-item > a[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ============================================
   GenerateBlocks Integration
   ============================================ */

/* Ensure GenerateBlocks containers work properly */
/* .pp-mega-menu-inner .gb-container {
  width: 100%;
} */

/* Grid support for multi-column layouts */
.pp-mega-menu-inner .gb-grid-wrapper {
  width: 100%;
}

/* Heading styles within mega menu */
/* .pp-mega-menu-inner h3,
.pp-mega-menu-inner .gb-headline {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--global-palette-color3, #333333);
} */

/* Link styles within mega menu */
/* .pp-mega-menu-inner a {
  color: var(--global-palette-color4, #666666);
  text-decoration: none;
  transition: color 0.2s ease;
} */

/* .pp-mega-menu-inner a:hover,
.pp-mega-menu-inner a:focus {
  color: var(--global-palette-color1, #000000);
  text-decoration: underline;
} */

/* Button styles */
/* .pp-mega-menu-inner .gb-button {
  margin-top: 0.5rem;
} */

/* ============================================
   Focus and Accessibility Styles
   ============================================ */

/* Focus visible styles for keyboard navigation */
.pp-mega-menu-wrapper a:focus-visible,
.pp-mega-menu-wrapper button:focus-visible,
.pp-mega-menu-wrapper [tabindex]:focus-visible {
  outline: 2px solid var(--global-palette-color1, #000000);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to main content when mega menu is open */
.pp-mega-menu-wrapper[aria-hidden="false"] {
  contain: layout style;
}

.pp-mega-menu-wrapper a {
  display: inline-flex;
  font-size: inherit;
}

.pp-mega-menu-purple a {
  color: var(--podcaster-plus-color-primary, #7e22ce) !important;
}
.pp-mega-menu-purple a:hover,
.pp-mega-menu-purple a:focus,
.pp-mega-menu-purple a:active {
  color: var(--podcaster-plus-color-default, #404040) !important;
}

/* Screen reader only content */
.pp-mega-menu-wrapper .screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* ============================================
   Mobile and Responsive Styles
   ============================================ */

/* Tablet styles */
@media (max-width: 1024px) {
  .pp-mega-menu-container {
    padding: 1.5rem;
  }

  /* .pp-mega-menu-inner h3 {
    font-size: 1rem;
  } */
}

/* Mobile styles - convert to accordion */
@media (max-width: 768px) {
  /* Hide desktop mega menu */
  .pp-mega-menu-wrapper {
    display: none !important;
  }

  /* Mobile menu adjustments */
  .main-navigation .pp-mega-item > a::after {
    display: none;
  }

  /* Use standard mobile dropdown instead */
  .main-navigation.toggled .pp-mega-item .sub-menu {
    display: block;
  }
}

/* ============================================
   Theme-Specific Overrides
   ============================================ */

/* GeneratePress specific adjustments */
.generate-nav .pp-mega-menu-wrapper {
  font-size: inherit;
  line-height: inherit;
}

/* Ensure proper z-index stacking */
.site-header {
  position: relative;
  z-index: 999;
}

.pp-mega-menu-wrapper {
  z-index: 9999;
  /* border-bottom: 3px solid var(--podcaster-plus-color-primary, #7e22ce); */
  border-bottom: 3px solid var(--podcaster-plus-color-default-darker, #030711);
}

/* ============================================
   Dark Mode Support
   ============================================ */

/* @media (prefers-color-scheme: dark) {
  .pp-mega-menu-wrapper {
    background: var(--pp-mega-menu-bg-dark, #1a1a1a);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .pp-mega-menu-inner h3 {
    color: var(--global-palette-color8, #ffffff);
  }

  .pp-mega-menu-inner a {
    color: var(--global-palette-color7, #cccccc);
  }

  .pp-mega-menu-inner a:hover,
  .pp-mega-menu-inner a:focus {
    color: var(--global-palette-color8, #ffffff);
  }
} */

/* ============================================
   Utility Classes
   ============================================ */

/* Hide on mobile */
.pp-mega-hide-mobile {
  display: block;
}

@media (max-width: 768px) {
  .pp-mega-hide-mobile {
    display: none;
  }
}

/* Hide on desktop */
.pp-mega-hide-desktop {
  display: none;
}

@media (max-width: 768px) {
  .pp-mega-hide-desktop {
    display: block;
  }
}

/* Column layouts for mega menu content */
.pp-mega-columns-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.pp-mega-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.pp-mega-columns-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .pp-mega-columns-2,
  .pp-mega-columns-3,
  .pp-mega-columns-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Featured section styling */
.pp-mega-featured {
  background: rgba(0, 0, 0, 0.02);
  padding: 1.5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Icon support */
.pp-mega-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pp-mega-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ============================================
   Animation Classes
   ============================================ */

/* Fade in animation */
@keyframes ppMegaFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide down animation */
@keyframes ppMegaSlideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 100vh;
    opacity: 1;
  }
}

/* Apply animations when specified */
.pp-mega-animate-fade .pp-mega-menu-wrapper {
  animation: ppMegaFadeIn 0.3s ease forwards;
}

.pp-mega-animate-slide .pp-mega-menu-wrapper {
  animation: ppMegaSlideDown 0.4s ease forwards;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .pp-mega-menu-wrapper {
    display: none !important;
  }
}