/**
 * Fluent Community Theme Overrides
 * Ethical Hacking YouTube Theme - Cyber Styling with Mobile-Safe Micro-Animations
 * @CyberSecurityCourse
 */

/* ============================================
   CSS VARIABLES FOR FLUENT COMMUNITY
   ============================================ */
:root {
  /* Theme color overrides for FluentCommunity */
  --fcom-primary-bg: #16161e;
  --fcom-secondary-bg: #0d0d12;
  --fcom-primary-text: #f8fafc;
  --fcom-menu-text: #94a3b8;
  --fcom-menu-text-hover: #f8fafc;
  --fcom-menu-text-active: #00ff88;
  --fcom-active-bg: rgba(0, 255, 136, 0.1);
  --fcom-menu-bg-hover: rgba(0, 255, 136, 0.08);
  --fcom-primary-border: #2d2d3a;
  --fcom-primary-button: #00ff88;
  --fcom-primary-button-text: #0d0d12;
  --fcom-header-height: 56px;

  /* Animation timing */
  --fcom-animation-fast: 150ms;
  --fcom-animation-medium: 250ms;
  --fcom-animation-slow: 350ms;
  --fcom-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --fcom-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   TOP MENU BAR STYLING
   ============================================ */
.fcom_top_menu {
  background: var(--fcom-primary-bg) !important;
  border-bottom: 1px solid var(--fcom-primary-border) !important;
  padding: 0.75rem 2rem !important;
}

/* Logo area */
.fcom_top_menu .fhr_logo a {
  transition: transform var(--fcom-animation-medium) var(--fcom-ease-spring);
}

.fcom_top_menu .fhr_logo a:hover {
  transform: scale(1.05);
}

.fcom_top_menu .fhr_logo a img {
  max-height: 36px !important;
}

/* ============================================
   HEADER MENU ITEMS WITH MICRO-ANIMATIONS
   ============================================ */
.fcom_top_menu .top_menu_center .fcom_header_menu {
  gap: 0.5rem !important;
}

.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link {
  color: var(--fcom-menu-text) !important;
  padding: 0.625rem 1rem !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  transition: color var(--fcom-animation-medium) var(--fcom-ease-out),
              background var(--fcom-animation-medium) var(--fcom-ease-out);
}

/* Underline slide animation - mobile compatible */
.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
  transition: width var(--fcom-animation-medium) var(--fcom-ease-out),
              left var(--fcom-animation-medium) var(--fcom-ease-out);
}

.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link:hover::after,
.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link.router-link-exact-active::after {
  width: 60%;
  left: 20%;
}

.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link:hover {
  color: var(--fcom-menu-text-hover) !important;
  background: var(--fcom-menu-bg-hover) !important;
}

.fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link.router-link-exact-active {
  color: var(--fcom-menu-text-active) !important;
  background: var(--fcom-active-bg) !important;
}

/* ============================================
   USER CONTEXT MENU STYLING (ANDROID-SAFE)
   ============================================ */
.fcom_user_context_menu_items li a {
  color: var(--fcom-menu-text) !important;
  transition: color var(--fcom-animation-fast) ease;
  /* No transform - Android compatibility */
}

.fcom_user_context_menu_items li a:hover {
  color: var(--fcom-menu-text-hover) !important;
  /* No translateY - Android compatibility */
}

/* User avatar hover effect - color only */
.fcom_user_context_menu_items .fcom_user_menu_item .user_avatar img {
  transition: border-color var(--fcom-animation-fast) ease;
  border: 2px solid transparent;
}

.fcom_user_context_menu_items .fcom_user_menu_item:hover .user_avatar img {
  border-color: var(--fcom-menu-text-active);
  /* No scale/box-shadow - Android compatibility */
}

/* Icon buttons - color change only */
.fcom_user_context_menu_items li.top_menu_item .fcom_menu_button,
.fcom_user_context_menu_items li.top_menu_item > a {
  color: var(--fcom-menu-text) !important;
  transition: color var(--fcom-animation-fast) ease,
              background var(--fcom-animation-fast) ease;
}

.fcom_user_context_menu_items li.top_menu_item .fcom_menu_button:hover,
.fcom_user_context_menu_items li.top_menu_item > a:hover {
  color: var(--fcom-menu-text-active) !important;
  background: var(--fcom-active-bg) !important;
}

/* Primary button - color change only */
.fcom_user_context_menu_items li.top_menu_item .fcom_menu_button.fcom_primary_button,
.fcom_user_context_menu_items li.top_menu_item > a.fcom_primary_button {
  background: var(--fcom-primary-button) !important;
  color: var(--fcom-primary-button-text) !important;
  border-color: var(--fcom-primary-button) !important;
  transition: background var(--fcom-animation-fast) ease;
  /* No transform animations - Android compatibility */
}

.fcom_user_context_menu_items li.top_menu_item .fcom_menu_button.fcom_primary_button:hover,
.fcom_user_context_menu_items li.top_menu_item > a.fcom_primary_button:hover {
  background: #00cc6a !important;
  /* No scale/box-shadow - Android compatibility */
}

/* Notification badge styling */
.fcom_user_context_menu_items li.fcom_countable_notification_holder .el-badge__content.is-fixed {
  background: #ff3366 !important;
  border-color: var(--fcom-primary-bg) !important;
}

/* ============================================
   SIDEBAR MENU STYLING
   ============================================ */
.spaces .space_contents {
  background: var(--fcom-primary-bg) !important;
  border-right-color: var(--fcom-primary-border) !important;
}

.spaces .space_contents ul li a {
  color: var(--fcom-menu-text) !important;
  transition: color var(--fcom-animation-fast) ease,
              background var(--fcom-animation-fast) ease;
  /* No transform - Android compatibility */
}

.spaces .space_contents ul li a:hover {
  color: var(--fcom-menu-text-hover) !important;
  background: var(--fcom-menu-bg-hover) !important;
  /* No translateX - Android compatibility */
}

.spaces .space_contents ul li a.router-link-exact-active {
  color: var(--fcom-menu-text-active) !important;
  background: var(--fcom-active-bg) !important;
}

.spaces .space_contents ul li a.router-link-exact-active::before {
  background: var(--fcom-menu-text-active) !important;
}

/* Section titles */
.spaces .space_contents h4.space_section_title {
  color: #64748b !important;
  text-transform: uppercase;
  font-size: 0.6875rem !important;
  letter-spacing: 0.05em;
}

/* ============================================
   MOBILE MENU WITH SAFE ANIMATIONS
   ============================================ */
.fcom_mobile_menu {
  background: var(--fcom-primary-bg) !important;
  border-top-color: var(--fcom-primary-border) !important;
  /* Solid background - no backdrop-filter for Android compatibility */
}

.fcom_mobile_menu .focm_menu_items .focm_menu_item {
  color: var(--fcom-menu-text) !important;
  transition: color var(--fcom-animation-fast) var(--fcom-ease-out),
              background var(--fcom-animation-fast) var(--fcom-ease-out);
  position: relative;
}

/* Touch feedback for mobile */
.fcom_mobile_menu .focm_menu_items .focm_menu_item:active {
  background: var(--fcom-active-bg) !important;
  color: var(--fcom-menu-text-active) !important;
}

/* Active state indicator */
.fcom_mobile_menu .focm_menu_items .focm_menu_item.router-link-exact-active {
  color: var(--fcom-menu-text-active) !important;
}

.fcom_mobile_menu .focm_menu_items .focm_menu_item.router-link-exact-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--fcom-menu-text-active);
  border-radius: 2px;
}

/* Notification badge */
.fcom_mobile_menu .focm_menu_item span.fcomc_unread_badge {
  background: #ff3366 !important;
}

/* ============================================
   MOBILE SIDEBAR - EXPLICIT VISIBILITY (ANDROID-SAFE)
   ============================================ */
@media all and (max-width: 1024px) {
  /* Ensure sidebar container is properly positioned */
  .spaces {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--fcom-primary-bg) !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Default: hidden off-screen */
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    -webkit-overflow-scrolling: touch;
  }

  /* OPEN STATE: Sidebar visible */
  .feed_layout.space_opened .spaces {
    transform: translateX(0) !important;
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5) !important;
  }

  /* Sidebar contents always visible (no opacity animation) */
  .spaces .space_contents {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Menu items - no animation, always visible */
  .spaces .space_contents ul li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Overlay when sidebar is open */
  .feed_layout.space_opened::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 999998 !important;
    pointer-events: auto !important;
  }
}

/* Keyframes disabled - causes Android Chrome rendering issues */
/* @keyframes fcomMenuSlide - DISABLED */

/* ============================================
   HAMBURGER MENU BUTTON - SIMPLE COLOR CHANGE
   ============================================ */
.space_opener button {
  color: var(--fcom-menu-text) !important;
  transition: color var(--fcom-animation-fast) ease;
  /* No transform - Android compatibility */
}

.space_opener button:hover,
.space_opener button:active {
  color: var(--fcom-menu-text-active) !important;
  /* No scale transform - causes issues on some Android devices */
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
.fcom_user_context_menu_items .fcom_user_menu_item .fcom_profile_extend.fcom_extend_menu .fcom_profile_sub_menu {
  background: var(--fcom-primary-bg) !important;
  border-color: var(--fcom-primary-border) !important;
  /* No animation - Android Chrome compatibility */
  opacity: 1;
}

/* Dropdown keyframes disabled for Android Chrome */
/* @keyframes fcomDropdownFade - DISABLED */

.fcom_profile_sub_menu li {
  background: var(--fcom-primary-bg) !important;
  border-bottom-color: var(--fcom-primary-border) !important;
}

.fcom_profile_sub_menu li a {
  color: var(--fcom-menu-text) !important;
}

.fcom_profile_sub_menu li:hover {
  background: var(--fcom-menu-bg-hover) !important;
}

.fcom_profile_sub_menu li:hover a {
  color: var(--fcom-menu-text-hover) !important;
}

/* ============================================
   CONTENT AREA STYLING
   ============================================ */
.fluent_com {
  background: var(--fcom-secondary-bg) !important;
  color: var(--fcom-primary-text) !important;
}

.fcom_wp_content h1,
.fcom_wp_content h2,
.fcom_wp_content h3,
.fcom_wp_content h4,
.fcom_wp_content h5,
.fcom_wp_content h6,
.fcom_wp_content p,
.fcom_wp_content ul,
.fcom_wp_content li,
.fcom_wp_content ol {
  color: var(--fcom-primary-text) !important;
}

.fhr_content_layout_header {
  background: var(--fcom-primary-bg) !important;
  border-bottom-color: var(--fcom-primary-border) !important;
}

.fhr_content_layout_header h1,
.fhr_content_layout_header h2 {
  color: var(--fcom-primary-text) !important;
}

/* ============================================
   SIDE FOOTER
   ============================================ */
.fcom_side_footer {
  background: var(--fcom-primary-bg) !important;
  border-top-color: var(--fcom-primary-border) !important;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
.spaces .space_contents::-webkit-scrollbar-track {
  background: var(--fcom-primary-bg) !important;
}

.spaces .space_contents::-webkit-scrollbar-thumb {
  background: var(--fcom-primary-border) !important;
}

.spaces .space_contents::-webkit-scrollbar-thumb:hover {
  background: #3d3d4a !important;
}

/* ============================================
   BUTTONS AND INTERACTIVE ELEMENTS
   ============================================ */
.fcom_primary_button {
  background: var(--fcom-primary-button) !important;
  color: var(--fcom-primary-button-text) !important;
  transition: transform var(--fcom-animation-fast) var(--fcom-ease-spring),
              box-shadow var(--fcom-animation-fast) var(--fcom-ease-out);
}

.fcom_primary_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.25);
}

.fcom_primary_button:active {
  transform: translateY(0);
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */
html.dark .fluent_com {
  background: var(--fcom-secondary-bg) !important;
}

html.dark .fcom_top_menu {
  background: var(--fcom-primary-bg) !important;
}

html.dark .spaces .space_contents {
  background: var(--fcom-primary-bg) !important;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .fcom_top_menu .fhr_logo a,
  .fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link,
  .fcom_user_context_menu_items li a,
  .spaces .space_contents ul li a,
  .fcom_mobile_menu .focm_menu_items .focm_menu_item,
  .fcom_primary_button {
    transition: none !important;
    animation: none !important;
  }

  .feed_layout.space_opened .spaces .space_contents ul li {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  .fcom_top_menu,
  .spaces .space_contents,
  .fcom_mobile_menu {
    border-width: 2px !important;
  }

  .fcom_top_menu .top_menu_center .fcom_header_menu .fcom_menu_link.router-link-exact-active,
  .spaces .space_contents ul li a.router-link-exact-active {
    outline: 2px solid var(--fcom-menu-text-active);
    outline-offset: 2px;
  }
}