/**
 * Hamburger Menu Right-Side Panel Style
 * Makes the hamburger menu display as a right-side panel (like Silicon template)
 * Light background, slides in from right, page visible behind
 */

/* ===== NAVBAR NAME (Jeffrey Francis Stanley Neumann) - Ensure readable ===== */
/* Override critical.css light grey color - Loads last so it takes precedence */
.navbar-name {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  font-weight: 500 !important;
}

[data-bs-theme="dark"] .navbar-name {
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}

/* Ensure navbar is visible */
.editorial-navbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  z-index: 10000 !important;
}

/* ===== OVERLAY BACKGROUND (Semi-transparent backdrop - page visible behind) ===== */
/* REMOVE ALL BLUR - Override any other CSS files */
.editorial-nav-overlay,
.editorial-nav-overlay.active,
.editorial-nav-overlay.active[style],
.editorial-nav-overlay[data-context],
.editorial-nav-overlay.scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important; /* NO BLUR */
  -webkit-backdrop-filter: none !important; /* NO BLUR */
  filter: none !important; /* NO BLUR */
  -webkit-filter: none !important; /* NO BLUR */
  z-index: 999999 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden !important;
  pointer-events: none;
  display: block !important;
}

.editorial-nav-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.editorial-nav-overlay.active[style] {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: none !important; /* NO BLUR */
  -webkit-backdrop-filter: none !important; /* NO BLUR */
  filter: none !important; /* NO BLUR */
  -webkit-filter: none !important; /* NO BLUR */
  opacity: 1 !important;
}

/* Remove blur from overlay pseudo-elements */
.editorial-nav-overlay::before,
.editorial-nav-overlay::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Final override - Remove blur from ALL possible states and contexts */
.editorial-nav-overlay *,
.editorial-nav-overlay.active *,
.editorial-nav-overlay[data-context] *,
.editorial-nav-overlay.scrolled * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ensure content panel also has no blur */
.editorial-nav-overlay-content,
.editorial-nav-overlay-content * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Ensure page content remains visible and scrollable underneath */
body:has(.editorial-nav-overlay.active) {
  overflow: visible !important; /* Don't hide body scroll - page stays visible */
}

/* Ensure main content is visible underneath overlay - NO BLUR */
body:has(.editorial-nav-overlay.active) main,
body:has(.editorial-nav-overlay.active) #main-content-section,
body:has(.editorial-nav-overlay.active) #hero-section,
body:has(.editorial-nav-overlay.active) .hero-section {
  /* Content remains visible - no blur effects */
  position: relative !important;
  z-index: 1 !important;
  filter: none !important; /* No blur on content */
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Allow clicks on backdrop to close menu, but prevent clicks on page content */
.editorial-nav-overlay.active {
  pointer-events: auto !important;
}

.editorial-nav-overlay.active .editorial-nav-overlay-content {
  pointer-events: auto !important;
}

/* ===== MENU CONTENT (Right-side panel - adapts to theme) ===== */
.editorial-nav-overlay-content {
  position: absolute !important; /* Not fixed - relative to overlay container */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 340px !important; /* Wide enough for Portfolio + 5 social icons on one line */
  max-width: 340px !important; /* Prevent it from getting wider */
  min-width: 340px !important; /* Prevent it from getting narrower */
  height: 100vh !important;
  background: #ffffff !important; /* Light background in light mode */
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000000 !important;
  transform: translateX(100%) !important; /* Start off-screen right */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease !important;
}

/* Dark mode panel background */
[data-bs-theme="dark"] .editorial-nav-overlay-content {
  background: #1f2937 !important; /* Dark gray background in dark mode */
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
}

/* Slide in from right when active */
.editorial-nav-overlay.active .editorial-nav-overlay-content {
  transform: translateX(0) !important; /* Slide into view */
}

/* ===== HEADER SECTION (Top - "Menu" title + Close button) ===== */
.editorial-nav-overlay-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.5rem 1.25rem 1rem 1.25rem !important;
  position: relative !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  z-index: 1000 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* Dark border in light mode */
  background: #ffffff !important; /* Light background in light mode */
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode header */
[data-bs-theme="dark"] .editorial-nav-overlay-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light border in dark mode */
  background: #1f2937 !important; /* Dark background in dark mode */
}

.editorial-nav-overlay-header-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
}

/* Show "Menu" title */
.editorial-nav-overlay-header::before {
  content: "Menu" !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: #1f2937 !important; /* Dark text in light mode */
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  transition: color 0.3s ease !important;
}

/* Dark mode menu title */
[data-bs-theme="dark"] .editorial-nav-overlay-header::before {
  color: #ffffff !important; /* White text in dark mode */
}

/* Hide the brand section in header */
.editorial-nav-overlay-header .editorial-nav-overlay-brand,
.editorial-nav-overlay-header .editorial-nav-overlay-brand-header,
.editorial-nav-overlay-header .editorial-nav-overlay-brand-info {
  display: none !important;
}

/* Close Button - Simple X button (like Silicon template) */
.editorial-nav-overlay-close {
  background: transparent !important;
  border: none !important;
  color: #6b7280 !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  padding: 0.5rem !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  min-width: 50px !important;
  min-height: 50px !important;
  position: relative !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-close {
  color: #9ca3af !important;
}

.editorial-nav-overlay-close:hover {
  background: transparent !important;
  color: #1f2937 !important;
  transform: scale(1.1) !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-close:hover {
  color: #e5e7eb !important;
}

.editorial-nav-overlay-close i {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: normal !important;
  font-style: normal !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Ensure Boxicons X icon displays */
.editorial-nav-overlay-close i.bx-x {
  font-family: 'boxicons' !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure Boxicons X icon content is correct */
.editorial-nav-overlay-close i.bx-x::before {
  content: '\ec8d' !important; /* Boxicons X icon Unicode (matches boxicons.css line 3509) */
  font-family: 'boxicons' !important;
  display: inline-block !important;
  font-size: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}

/* Text fallback span - Show by default, hide only if Boxicons works */
.editorial-nav-overlay-close .close-icon-fallback {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  color: inherit !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important; /* Show by default */
  transition: opacity 0.2s ease !important;
}

/* Hide text fallback ONLY if Boxicons is confirmed working (has boxicons-loaded class) */
.editorial-nav-overlay-close i.bx-x.boxicons-loaded + .close-icon-fallback {
  opacity: 0 !important;
}

/* Show text fallback if Boxicons class is added by JS */
.editorial-nav-overlay-close i.bx-x.no-boxicons + .close-icon-fallback {
  opacity: 1 !important;
}

.editorial-nav-overlay-close i.bx-x.no-boxicons::before {
  opacity: 0 !important;
  display: none !important;
}

/* Hide screen reader text */
.editorial-nav-overlay-close .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

.editorial-nav-overlay-close:focus {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
}

/* ===== MENU NAVIGATION (Left-aligned list like Silicon template) ===== */
.editorial-nav-overlay-menu {
  flex: 1 !important;
  padding: 1.5rem 1.25rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.editorial-nav-overlay-menu ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}

.editorial-nav-overlay-menu li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Spacing between menu items */
.editorial-nav-overlay-menu li:not(:last-child) {
  margin-bottom: 0 !important;
}

/* Navigation Links (adapts to theme) */
.editorial-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Text left, chevron right */
  color: #1f2937 !important; /* Dark text in light mode */
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 0.875rem 1.25rem !important;
  transition: all 0.2s ease !important;
  border-bottom: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  position: relative !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 100% !important;
  text-align: left !important;
  border-radius: 0 !important;
}

/* Dark mode links */
[data-bs-theme="dark"] .editorial-nav-link {
  color: #e5e7eb !important; /* Light text in dark mode */
}

.editorial-nav-link:hover,
.editorial-nav-link:focus {
  color: #6366f1 !important; /* Purple on hover in light mode */
  background: rgba(99, 102, 241, 0.05) !important; /* Light purple background on hover */
}

[data-bs-theme="dark"] .editorial-nav-link:hover,
[data-bs-theme="dark"] .editorial-nav-link:focus {
  color: #ffffff !important; /* White on hover in dark mode */
  background: rgba(255, 255, 255, 0.1) !important; /* Light background on hover */
}

.editorial-nav-link.active {
  color: #6366f1 !important; /* Purple for active link in light mode - high contrast */
  font-weight: 600 !important; /* Bolder for better visibility */
  background: rgba(99, 102, 241, 0.1) !important; /* Slightly more visible background */
  border-left: 3px solid #6366f1 !important; /* Purple left border for clear indication */
}

/* Ensure active link text is readable - override any gradient effects */
.editorial-nav-link.active,
.editorial-nav-link.active span {
  color: #6366f1 !important; /* Force purple color - high contrast */
  -webkit-text-fill-color: #6366f1 !important; /* Override gradient fills */
  background: none !important; /* Remove gradient backgrounds */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

[data-bs-theme="dark"] .editorial-nav-link.active {
  color: #ffffff !important; /* White for active link in dark mode - high contrast */
  font-weight: 600 !important; /* Bolder for better visibility */
  background: rgba(255, 255, 255, 0.15) !important; /* More visible background in dark mode */
  border-left: 3px solid #ffffff !important; /* White left border for clear indication */
}

[data-bs-theme="dark"] .editorial-nav-link.active,
[data-bs-theme="dark"] .editorial-nav-link.active span {
  color: #ffffff !important; /* Force white color - high contrast */
  -webkit-text-fill-color: #ffffff !important; /* Override gradient fills */
  background: none !important; /* Remove gradient backgrounds */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* Remove active link underline - Silicon template doesn't use it */
.editorial-nav-link.active::before {
  content: none !important;
}

/* Chevron indicator for expandable items (like Silicon template) */
.editorial-nav-link::after {
  content: "⌄" !important; /* Down chevron */
  font-size: 0.875rem !important;
  color: #9ca3af !important; /* Gray chevron in light mode */
  margin-left: auto !important; /* Push to right */
  transition: transform 0.2s ease, color 0.2s ease !important;
  flex-shrink: 0 !important;
  font-weight: 400 !important;
}

[data-bs-theme="dark"] .editorial-nav-link::after {
  color: #6b7280 !important; /* Lighter gray chevron in dark mode */
}

/* Hide chevron if link doesn't have dropdown */
.editorial-nav-link:not([data-toggle]):not(.has-dropdown)::after {
  content: none !important;
}

.editorial-nav-link:hover::after,
.editorial-nav-link:focus::after {
  color: #6366f1 !important; /* Purple chevron on hover in light mode */
}

[data-bs-theme="dark"] .editorial-nav-link:hover::after,
[data-bs-theme="dark"] .editorial-nav-link:focus::after {
  color: #ffffff !important; /* White chevron on hover in dark mode */
}

.editorial-nav-link.active::after {
  color: #6366f1 !important; /* Purple chevron for active in light mode */
}

[data-bs-theme="dark"] .editorial-nav-link.active::after {
  color: #ffffff !important; /* White chevron for active in dark mode */
}

/* Ensure link text doesn't wrap */
.editorial-nav-link span {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Override Art Gallery featured styling in hamburger menu for readability */
.editorial-nav-overlay-menu .art-gallery-featured {
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: normal !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: none !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-menu .art-gallery-featured {
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}

.editorial-nav-overlay-menu .art-gallery-featured.active,
.editorial-nav-overlay-menu .art-gallery-featured.active *,
.editorial-nav-overlay-menu .art-gallery-featured.active span {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
  text-shadow: none !important;
  filter: none !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-menu .art-gallery-featured.active,
[data-bs-theme="dark"] .editorial-nav-overlay-menu .art-gallery-featured.active *,
[data-bs-theme="dark"] .editorial-nav-overlay-menu .art-gallery-featured.active span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.editorial-nav-overlay-menu .art-gallery-featured::before,
.editorial-nav-overlay-menu .art-gallery-featured::after {
  display: none !important;
  content: none !important;
}

/* Hide icons in menu links */
.editorial-nav-link i,
.editorial-nav-link .timeline-icon {
  display: none !important;
}

/* Art Gallery icon - keep visible but ensure readable */
.editorial-nav-link .art-gallery-icon {
  display: inline-block !important; /* Keep icon visible */
  color: inherit !important; /* Inherit link color */
  -webkit-text-fill-color: inherit !important; /* Override gradient for active state */
  background: none !important; /* Remove gradient background */
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

/* Active Art Gallery link - ensure icon is readable */
.editorial-nav-link.active .art-gallery-icon {
  color: #6366f1 !important; /* Purple icon in light mode */
  -webkit-text-fill-color: #6366f1 !important;
  background: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  filter: none !important; /* Remove glow effects that reduce contrast */
}

[data-bs-theme="dark"] .editorial-nav-link.active .art-gallery-icon {
  color: #ffffff !important; /* White icon in dark mode */
  -webkit-text-fill-color: #ffffff !important;
  filter: none !important;
}

/* Badge styling - show badges but ensure readable */
.editorial-nav-link .art-count-badge {
  display: inline-block !important; /* Show badge */
  color: #6b7280 !important; /* Gray text in light mode */
  background: rgba(99, 102, 241, 0.1) !important; /* Light purple background */
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
}

[data-bs-theme="dark"] .editorial-nav-link .art-count-badge {
  color: #d1d5db !important; /* Light gray text in dark mode */
  background: rgba(255, 255, 255, 0.1) !important; /* Light background */
}

/* Active link badge */
.editorial-nav-link.active .art-count-badge {
  color: #6366f1 !important; /* Purple text in light mode */
  background: rgba(99, 102, 241, 0.15) !important; /* Slightly darker purple */
}

[data-bs-theme="dark"] .editorial-nav-link.active .art-count-badge {
  color: #ffffff !important; /* White text in dark mode */
  background: rgba(255, 255, 255, 0.2) !important; /* Slightly brighter background */
}

/* Social links visibility - make them visible with BLACK borders and icons */
.editorial-nav-overlay-menu .social-links-group {
  display: flex !important;
  flex-wrap: nowrap !important; /* Keep all icons on one line */
  gap: 0.375rem !important; /* Smaller gap to fit all icons */
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: auto !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important; /* Prevent shrinking */
}

.editorial-nav-overlay-menu .social-links-group .social-btn {
  background: #000000 !important; /* Black background for circles */
  border: none !important; /* No border - solid black circles */
  color: #ffffff !important; /* White icons */
  width: 36px !important; /* Slightly smaller to fit all on one line */
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important; /* Perfect circles */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  flex-shrink: 0 !important; /* Prevent icons from shrinking */
  aspect-ratio: 1 / 1 !important; /* Ensure perfect circles */
}

/* Brand colors on hover for each social platform - colored backgrounds */
.editorial-nav-overlay-menu .social-links-group .social-btn[data-platform="LinkedIn"]:hover {
  background: #0077b5 !important; /* LinkedIn blue */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.editorial-nav-overlay-menu .social-links-group .social-btn[data-platform="Twitter"]:hover {
  background: #1da1f2 !important; /* Twitter blue */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.editorial-nav-overlay-menu .social-links-group .social-btn[data-platform="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; /* Instagram gradient */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.editorial-nav-overlay-menu .social-links-group .social-btn[data-platform="Dribbble"]:hover {
  background: #ea4c89 !important; /* Dribbble pink */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.editorial-nav-overlay-menu .social-links-group .social-btn[data-platform="Behance"]:hover {
  background: #1769ff !important; /* Behance blue */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Default hover for any social button without specific platform */
.editorial-nav-overlay-menu .social-links-group .social-btn:hover {
  background: #6366f1 !important; /* Purple fallback */
  border: none !important;
  border-radius: 50% !important; /* Keep circular on hover */
  color: #ffffff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.editorial-nav-overlay-menu .social-links-group .social-btn:focus {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
}

/* Social button icons - white on black background */
.editorial-nav-overlay-menu .social-links-group .social-btn i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
}

/* Social button backgrounds - black filled circles */
.editorial-nav-overlay-menu .social-links-group .social-btn:not(:hover) {
  background: #000000 !important;
  border: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Portfolio link with social icons - make layout work */
.editorial-nav-overlay-menu li.d-flex {
  display: flex !important;
  flex-direction: row !important; /* Horizontal layout for Portfolio + icons */
  align-items: center !important;
  gap: 0.625rem !important; /* Smaller gap between Portfolio link and icons */
  padding: 0.875rem 1.25rem !important; /* Match menu padding */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  flex-wrap: nowrap !important; /* Keep everything on one line */
  width: 100% !important;
  box-sizing: border-box !important;
}

.editorial-nav-overlay-menu li.d-flex .editorial-nav-link {
  width: auto !important; /* Auto width for Portfolio link */
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  flex-shrink: 1 !important; /* Allow Portfolio link to shrink slightly if needed */
  white-space: nowrap !important;
}

.editorial-nav-overlay-menu li.d-flex .social-links-group {
  margin-left: auto !important; /* Push icons to the right */
  margin-top: 0 !important;
  flex-shrink: 0 !important; /* Don't shrink the icons - they must stay on one line */
  min-width: fit-content !important; /* Ensure icons container doesn't shrink */
}

/* Ensure all text in menu is readable */
.editorial-nav-overlay-menu,
.editorial-nav-overlay-menu * {
  color: inherit !important;
}

/* Make sure span elements inside links are readable */
.editorial-nav-link span {
  color: inherit !important;
  font-weight: inherit !important;
}

/* Force dark color on all text in inactive links */
.editorial-nav-link:not(.active) {
  color: #1f2937 !important; /* Dark text in light mode */
}

[data-bs-theme="dark"] .editorial-nav-link:not(.active) {
  color: #e5e7eb !important; /* Light gray in dark mode */
}

.editorial-nav-link:not(.active) span {
  color: inherit !important; /* Inherit from parent */
}

.editorial-nav-link:not(.active):hover {
  color: #6366f1 !important; /* Purple on hover in light mode */
}

[data-bs-theme="dark"] .editorial-nav-link:not(.active):hover {
  color: #ffffff !important; /* White on hover in dark mode */
}

.editorial-nav-link:not(.active):hover span {
  color: inherit !important; /* Inherit from parent */
}

/* Additional specificity to override any conflicting styles */
.editorial-nav-overlay-menu .editorial-nav-link:not(.active),
.editorial-nav-overlay-menu li .editorial-nav-link:not(.active) {
  color: #1f2937 !important; /* Dark text in light mode */
}

[data-bs-theme="dark"] .editorial-nav-overlay-menu .editorial-nav-link:not(.active),
[data-bs-theme="dark"] .editorial-nav-overlay-menu li .editorial-nav-link:not(.active) {
  color: #e5e7eb !important; /* Light gray in dark mode */
}

.editorial-nav-overlay-menu .editorial-nav-link:not(.active) span,
.editorial-nav-overlay-menu li .editorial-nav-link:not(.active) span {
  color: inherit !important; /* Inherit from parent */
}

/* Improve focus states for accessibility */
.editorial-nav-link:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
  background: rgba(99, 102, 241, 0.1) !important;
  border-radius: 4px !important;
}

/* ===== QUICK ACTIONS (Mobile) ===== */
.editorial-nav-overlay-quick-actions {
  display: none !important; /* Hide quick actions in panel */
}

/* ===== ENSURE ALL MENU CONTENT IS VISIBLE ===== */
/* Make sure nothing is hidden */
.editorial-nav-overlay-menu ul li {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.editorial-nav-overlay-menu ul li a {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure Explore More section is visible */
.editorial-nav-overlay-secondary-links {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.editorial-nav-overlay-secondary-links#exploreMoreSection {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== FOOTER SECTION (Bottom button like Silicon template) ===== */
.editorial-nav-overlay-footer {
  padding: 1.25rem 1.25rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important; /* Dark border in light mode */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
  background: #ffffff !important; /* Light background in light mode */
  pointer-events: auto !important; /* Ensure footer is clickable */
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

/* Dark mode footer */
[data-bs-theme="dark"] .editorial-nav-overlay-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light border in dark mode */
  background: #1f2937 !important; /* Dark background in dark mode */
}

/* Ensure theme toggle button is clickable */
.editorial-nav-overlay-footer #themeToggle,
.editorial-nav-overlay-footer button#themeToggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 10 !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Buy Now Button (like Silicon template - purple with icon) */
.editorial-nav-overlay-footer .btn,
.editorial-nav-overlay-footer button:not(#themeToggle) {
  width: 100% !important;
  background: #6366f1 !important; /* Purple button */
  color: #ffffff !important;
  border: none !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important;
}

.editorial-nav-overlay-footer .btn:hover,
.editorial-nav-overlay-footer button:not(#themeToggle):hover {
  background: #4f46e5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* Theme toggle button styling - Light Mode (Default) */
.editorial-nav-overlay-footer #themeToggle,
.editorial-nav-overlay-footer button#themeToggle {
  background: #ffffff !important; /* White background */
  color: #374151 !important; /* Dark text */
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  position: relative !important;
  width: 100% !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.3s ease !important;
  /* Override btn-link and text-white classes */
  text-decoration: none !important;
}

/* Dark Mode Active State - Button shows dark mode is ON */
.editorial-nav-overlay-footer #themeToggle.theme-active,
.editorial-nav-overlay-footer button#themeToggle.theme-active,
[data-bs-theme="dark"] .editorial-nav-overlay-footer #themeToggle,
[data-bs-theme="dark"] .editorial-nav-overlay-footer button#themeToggle {
  background: #1f2937 !important; /* Dark gray background */
  color: #f9fafb !important; /* Light text */
  border-color: #6366f1 !important; /* Purple border */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Light Mode Inactive State - Button shows light mode is ON */
.editorial-nav-overlay-footer #themeToggle.theme-inactive,
.editorial-nav-overlay-footer button#themeToggle.theme-inactive,
[data-bs-theme="light"] .editorial-nav-overlay-footer #themeToggle,
[data-bs-theme="light"] .editorial-nav-overlay-footer button#themeToggle {
  background: #ffffff !important; /* White background */
  color: #374151 !important; /* Dark text */
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.editorial-nav-overlay-footer #themeToggle:hover,
.editorial-nav-overlay-footer button#themeToggle:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
  border-color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important;
}

/* Dark mode hover */
[data-bs-theme="dark"] .editorial-nav-overlay-footer #themeToggle:hover,
[data-bs-theme="dark"] .editorial-nav-overlay-footer button#themeToggle:hover {
  background: #374151 !important;
  color: #ffffff !important;
  border-color: #818cf8 !important;
}

/* Dark mode navigation links - ensure readability */
[data-bs-theme="dark"] .editorial-nav-link {
  color: #e5e7eb !important; /* Light text on dark background */
}

[data-bs-theme="dark"] .editorial-nav-link:hover,
[data-bs-theme="dark"] .editorial-nav-link:focus {
  color: #ffffff !important; /* White on hover - maximum contrast */
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .editorial-nav-link.active {
  color: #ffffff !important; /* White for active - maximum contrast */
}

[data-bs-theme="dark"] .editorial-nav-link::after {
  color: #9ca3af !important; /* Light gray chevron */
}

[data-bs-theme="dark"] .editorial-nav-link:hover::after,
[data-bs-theme="dark"] .editorial-nav-link:focus::after {
  color: #ffffff !important; /* White chevron on hover */
}

[data-bs-theme="dark"] .editorial-nav-overlay-header {
  background: #1f2937 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-footer {
  background: #1f2937 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-close {
  color: #9ca3af !important; /* Light gray close button */
}

[data-bs-theme="dark"] .editorial-nav-overlay-close:hover {
  color: #ffffff !important; /* White on hover */
}

.editorial-nav-overlay-footer #themeToggle:active,
.editorial-nav-overlay-footer button#themeToggle:active {
  transform: scale(0.98) !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-footer #themeToggle:active,
[data-bs-theme="dark"] .editorial-nav-overlay-footer button#themeToggle:active {
  background: #4b5563 !important;
}

.editorial-nav-overlay-footer #themeToggle:focus,
.editorial-nav-overlay-footer button#themeToggle:focus {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

.editorial-nav-overlay-footer #themeToggle i,
.editorial-nav-overlay-footer #themeToggle span,
.editorial-nav-overlay-footer button#themeToggle i,
.editorial-nav-overlay-footer button#themeToggle span {
  color: inherit !important;
  pointer-events: none !important; /* Prevent icon/span from blocking clicks */
  transition: color 0.3s ease !important;
}

/* ===== REMOVE CONTEXT-AWARE SECTIONS ===== */
/* Hide Related Projects, Quick Actions, Portfolio Categories, and Quick Links sections */
#relatedProjectsSection,
#quickActionsSection,
#portfolioCategoriesSection,
#artGalleryQuickLinksSection {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .editorial-nav-overlay-content {
    width: 85% !important; /* Wider on mobile */
    min-width: 340px !important;
    max-width: 100% !important;
  }
  
  .editorial-nav-overlay-header {
    padding: 1.25rem 1.5rem !important;
  }
  
  .editorial-nav-overlay-menu {
    padding: 1rem 1.5rem !important;
  }
  
  .editorial-nav-overlay-footer {
    padding: 1.25rem 1.5rem !important;
  }
}

/* ===== ANIMATIONS ===== */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%) !important;
  }
  to {
    transform: translateX(0) !important;
  }
}

.editorial-nav-overlay.active .editorial-nav-overlay-content {
  animation: slideInFromRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ===== SCROLLBAR STYLING ===== */
.editorial-nav-overlay-content::-webkit-scrollbar {
  width: 6px !important;
}

.editorial-nav-overlay-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.editorial-nav-overlay-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 3px !important;
}

.editorial-nav-overlay-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ===== ACCESSIBILITY ===== */
.editorial-nav-overlay-close:focus-visible,
.editorial-nav-link:focus-visible {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
}

/* ===== FORCE READABLE TEXT ===== */
.editorial-nav-overlay-menu .editorial-nav-link:not(.active) {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  background: transparent !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-menu .editorial-nav-link:not(.active) {
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}

.editorial-nav-overlay-menu .editorial-nav-link:not(.active) span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.editorial-nav-overlay-menu .editorial-nav-link:not(.active):hover {
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-menu .editorial-nav-link:not(.active):hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ===== ENSURE ALL ELEMENTS ARE VISIBLE ===== */
.editorial-nav-overlay-content .editorial-nav-link,
.editorial-nav-overlay-content .editorial-nav-secondary-title,
.editorial-nav-overlay-content .editorial-nav-secondary-link,
.editorial-nav-overlay-content .social-btn,
.editorial-nav-overlay-content button,
.editorial-nav-overlay-content .editorial-nav-overlay-close {
  opacity: 1 !important;
  visibility: visible !important;
}

.editorial-nav-overlay-content i,
.editorial-nav-overlay-content .bx {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  color: inherit !important;
}

/* ===== EXPLORE MORE / SECONDARY LINKS SECTION ===== */
.editorial-nav-overlay-secondary-links {
  padding: 0.75rem 2rem !important; /* Reduced from 1.5rem */
  border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
  margin-top: auto !important;
  background: transparent !important;
  display: block !important; /* Ensure it's visible */
  visibility: visible !important;
  opacity: 1 !important;
}

.editorial-nav-overlay-secondary-links#exploreMoreSection {
  display: block !important; /* Force visible */
  visibility: visible !important;
  opacity: 1 !important;
}

.editorial-nav-secondary-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important; /* Dark text in light mode */
  margin-bottom: 0.5rem !important; /* Reduced from 1rem */
  margin-top: 0.5rem !important; /* Reduced top margin */
  letter-spacing: 0.01em !important;
  -webkit-text-fill-color: #1f2937 !important; /* Override any gradient fills */
  text-shadow: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: color 0.3s ease !important;
}

[data-bs-theme="dark"] .editorial-nav-secondary-title {
  color: #e5e7eb !important; /* Light gray in dark mode */
  -webkit-text-fill-color: #e5e7eb !important;
}

.editorial-nav-secondary-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important; /* Reduced from 0.5rem */
  visibility: visible !important;
  opacity: 1 !important;
}

.editorial-nav-secondary-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  color: #374151 !important; /* Dark gray in light mode */
  text-decoration: none !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important; /* Slightly bolder for readability */
  padding: 0.5rem 0 !important; /* Reduced from 0.75rem */
  transition: all 0.2s ease !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; /* Dark border in light mode */
  -webkit-text-fill-color: #374151 !important; /* Override gradient fills */
  visibility: visible !important;
  opacity: 1 !important;
}

[data-bs-theme="dark"] .editorial-nav-secondary-link {
  color: #d1d5db !important; /* Light gray in dark mode */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Light border in dark mode */
  -webkit-text-fill-color: #d1d5db !important;
}

.editorial-nav-secondary-link:hover {
  color: #ffffff !important; /* White on hover - maximum contrast */
  -webkit-text-fill-color: #ffffff !important;
  padding-left: 0.5rem !important;
}

.editorial-nav-secondary-link i {
  color: inherit !important;
  font-size: 1.125rem !important;
  width: 20px !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

.editorial-nav-secondary-link span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Explore More section colors */
.editorial-nav-overlay-secondary-links .editorial-nav-secondary-title {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-secondary-links .editorial-nav-secondary-title {
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
}

.editorial-nav-overlay-secondary-links .editorial-nav-secondary-link,
.editorial-nav-overlay-secondary-links .editorial-nav-secondary-link span {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

[data-bs-theme="dark"] .editorial-nav-overlay-secondary-links .editorial-nav-secondary-link,
[data-bs-theme="dark"] .editorial-nav-overlay-secondary-links .editorial-nav-secondary-link span {
  color: #d1d5db !important;
  -webkit-text-fill-color: #d1d5db !important;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .editorial-nav-overlay,
  .editorial-nav-overlay-content,
  .editorial-nav-link {
    transition: none !important;
    animation: none !important;
  }
  
  .editorial-nav-overlay.active .editorial-nav-overlay-content {
    transform: translateX(0) !important;
  }
}

/* ===== HAMBURGER ICON VISIBILITY ===== */
.editorial-navbar-toggle-icon span {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: #000000 !important;
}

.editorial-navbar-toggle:hover .editorial-navbar-toggle-icon span,
.editorial-navbar-toggle.active .editorial-navbar-toggle-icon span {
  background: #6366f1 !important;
  color: #6366f1 !important;
  -webkit-text-fill-color: #6366f1 !important;
}

.editorial-navbar-toggle {
  background: transparent !important;
  border: none !important;
}

.editorial-navbar-toggle:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

.editorial-navbar-toggle:active {
  background: rgba(99, 102, 241, 0.15) !important;
}