/**
 * Mobile Navigation Styles (Refactored)
 * Full-screen overlay navigation with touch-optimized controls
 * Only loaded on mobile devices (< 768px)
 *
 * Architecture:
 * 1. Fixed header bar (always visible)
 * 2. Full-screen overlay menu (hidden by default)
 * 3. Backdrop blur layer
 *
 * Dependencies: design-tokens-mobile.css
 *
 * @version 2.0.0
 */

/* ===== Mobile Header Bar ===== */
@media (max-width: 767px) {
  neoshare-header-mobile {
    display: block;
  }

  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);

    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background var(--mobile-anim-normal) ease;
  }

  /* Scrolled state - more opaque */
  .mobile-header.scrolled {
    background: rgba(0, 0, 0, 0.8);
  }
}

.mobile-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--mobile-gutter, 24px); /* RESPONSIVE v2.1: Increased from 12px, fallback 24px */
  min-height: var(--mobile-header-height, 72px); /* Fallback if token not loaded */
}

/* ===== Logo ===== */
.mobile-header-logo {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  /* Ensure logo doesn't get squashed against edge */
  flex-shrink: 0;
}

.mobile-header-logo img {
  height: 28px; /* RESPONSIVE v2.1: Increased from 24px to match larger header */
  width: auto;
}

/* Always show white logo on mobile (dark header) */
.mobile-header-logo .logo-white {
  display: block;
}

.mobile-header-logo .logo-black {
  display: none;
}

/* ===== Menu Toggle Button ===== */
.mobile-menu-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--mobile-touch-min);
  height: var(--mobile-touch-min);
  padding: 0;

  background: none;
  border: none;
  cursor: pointer;

  /* Force visible - fixes visibility:hidden bug */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  -webkit-tap-highlight-color: transparent;
  transition: transform var(--mobile-anim-fast) var(--mobile-ease-out);
}

.mobile-menu-toggle:active {
  transform: scale(0.95);
}

.menu-icon {
  width: 28px; /* RESPONSIVE v2.1: Increased from 24px */
  height: 28px; /* RESPONSIVE v2.1: Increased from 24px */
  color: rgba(255, 255, 255, 0.95);
}

.menu-line {
  transition: all var(--mobile-anim-normal) ease;
}

/* ===== Mobile Menu Overlay ===== */
@media (max-width: 767px) {
  .mobile-menu-overlay {
    /* Positioning */
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);

    /* Ensure it's on top of everything */
    isolation: isolate;

    /* Visual */
    background: rgba(0, 0, 0, var(--mobile-menu-overlay-opacity));
    backdrop-filter: blur(var(--mobile-menu-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--mobile-menu-blur)) saturate(180%);

    /* Scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* RESPONSIVE v2.1: Changed from center to align left */
    justify-content: center;
    padding: var(--mobile-spacing-2xl) var(--mobile-gutter, 24px);

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mobile-anim-normal) ease,
                visibility var(--mobile-anim-normal) ease;
  }

  /* Closed state - no interactions */
  .mobile-menu-overlay:not(.open) {
    pointer-events: none;
  }

  /* Open state */
  .mobile-menu-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Force menu content visible when open */
  .mobile-menu-overlay.open .mobile-menu-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .mobile-menu-overlay.open .mobile-menu-item,
  .mobile-menu-overlay.open .mobile-product-link,
  .mobile-menu-overlay.open .mobile-menu-label,
  .mobile-menu-overlay.open .mobile-menu-cta {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .mobile-menu-overlay.open .mobile-products-content {
    display: block !important;
  }

  /* Override [hidden] attribute for animation */
  .mobile-menu-overlay[hidden] {
    display: flex;
  }
}

/* ===== Menu Header ===== */
@media (max-width: 767px) {
  .mobile-menu-header {
    position: absolute !important;
    top: 16px !important; /* RESPONSIVE v2.1: Match header bar vertical padding */
    right: var(--mobile-gutter, 24px) !important; /* RESPONSIVE v2.1: Match header bar horizontal padding */
    left: auto !important;
    z-index: var(--z-raised);

    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;

    /* Remove border from main styles.css */
    border: none !important;
    border-bottom: none !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Hide title in full-screen mode */
  .mobile-menu-title {
    display: none;
  }

  .mobile-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--mobile-touch-min);
    height: var(--mobile-touch-min);
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 50%;

    color: var(--pure-white);
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: all var(--mobile-anim-fast) var(--mobile-ease-out);
  }

  .mobile-menu-close:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-close svg {
    color: var(--pure-white);
    stroke: var(--pure-white);
  }
}

/* ===== Menu Content ===== */
@media (max-width: 767px) {
  .mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* RESPONSIVE v2.1: Changed from center - align left with button */
    justify-content: flex-start;

    width: 100%;
    max-width: 100%; /* RESPONSIVE v2.1: Changed from 400px - full width */
    margin: 0; /* RESPONSIVE v2.1: Removed auto margin */
    padding: var(--mobile-spacing-2xl) 0 var(--mobile-spacing-xl) 0;
  }

  /* RESPONSIVE v2.1: Legacy section styles - kept for backwards compatibility */
  .mobile-menu-section {
    width: 100%;
    margin-bottom: 0; /* Removed - using item spacing instead */
    border: none !important;
    border-bottom: none !important;
  }

  .mobile-menu-section::after,
  .mobile-menu-label::after {
    display: none !important;
    border: none !important;
  }

  /* RESPONSIVE v2.1: Hide Products label */
  .mobile-menu-label {
    display: none !important;
  }

  /* Menu Items */
  .mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: var(--mobile-menu-item-height);
    padding: var(--mobile-spacing-md) 0; /* Optimized: Reduced for better density */
    margin-bottom: var(--mobile-spacing-md); /* Consistent spacing between all items */

    font-size: var(--mobile-text-xl);
    font-weight: 600;
    color: var(--pure-white);
    text-decoration: none;
    text-align: left;

    background: none;
    border: none;
    border-radius: var(--radius-md);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition: all var(--mobile-anim-fast) var(--mobile-ease-out);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  /* RESPONSIVE v2.1: Menu items with descriptions (products) */
  .mobile-menu-item-with-desc {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mobile-spacing-xs);
  }

  .mobile-menu-item-title {
    font-size: var(--mobile-text-xl);
    font-weight: 600;
    color: var(--pure-white);
  }

  .mobile-menu-item-desc {
    font-size: var(--mobile-text-sm);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: none;
  }

  .mobile-menu-item:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
  }

  /* RESPONSIVE v2.1: Legacy product styles - hidden, using unified menu items instead */
  .mobile-products-content {
    display: none !important;
  }

  .mobile-product-link {
    display: none !important;
  }

  .mobile-product-text {
    display: none !important;
  }

  .mobile-product-title {
    font-size: var(--mobile-text-base);
    font-weight: 600;
    color: var(--pure-white);
    white-space: nowrap;
  }

  .mobile-product-desc {
    font-size: var(--mobile-text-sm);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Menu CTA */
  .mobile-menu-cta {
    width: 100%;
    padding: var(--mobile-spacing-md) 0 0;
    margin-top: var(--mobile-menu-cta-margin-top);
  }

  /* Match landing page hero button styling exactly */
  .mobile-menu-cta .btn,
  .mobile-menu-cta .btn-primary,
  .btn-full-mobile {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    justify-content: center !important;
    padding: 16px 24px !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
    background: var(--signal-orange) !important;
    color: var(--pure-white) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ===== Backdrop ===== */
@media (max-width: 767px) {
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);

    background: rgba(0, 0, 0, 0.5);
    opacity: 0;

    transition: opacity var(--mobile-anim-normal) ease;
    pointer-events: none;
  }

  .mobile-menu-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Override [hidden] attribute */
  .mobile-menu-backdrop[hidden] {
    display: block;
  }
}

/* ===== Accessibility ===== */

/* Focus visible styles */
.mobile-menu-item:focus-visible,
.mobile-product-link:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-overlay,
  .mobile-menu-backdrop,
  .mobile-menu-toggle,
  .mobile-menu-item,
  .mobile-product-link {
    transition: none;
  }
}

/* ===== Dark Theme ===== */
:root[data-theme="dark"] .mobile-header {
  background: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ===== Safe Area Support (iOS Notch) ===== */
@supports (padding: max(0px)) {
  .mobile-header-bar {
    padding-left: max(var(--mobile-gutter), var(--mobile-safe-left));
    padding-right: max(var(--mobile-gutter), var(--mobile-safe-right));
  }

  .mobile-menu-content {
    padding-bottom: max(var(--mobile-spacing-xl), var(--mobile-safe-bottom));
  }
}

/* ===== Landscape Orientation ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-menu-header {
    padding: 12px 20px;
  }

  .mobile-menu-item,
  .mobile-product-link {
    min-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}