/* ===========================================
   NEXUSTG WIN95 PORTFOLIO - Mobile Styles
   9:16 Portrait Format Adaptation
   =========================================== */

/* Mobile Detection */
@media screen and (max-width: 768px), (orientation: portrait) {
  :root {
    --taskbar-height: 40px;
    --icon-size: 56px;
  }

  body {
    font-size: 14px;
  }

  /* Desktop Grid - Portrait Layout */
  .desktop {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 16px !important;
    padding: 16px !important;
    align-content: start !important;
  }

  .desktop-icon {
    padding: 8px;
  }

  .desktop-icon img {
    width: 56px;
    height: 56px;
  }

  .icon-label {
    font-size: 10px;
    max-width: 60px;
  }

  /* =============================================
     TASKBAR - MOBILE (CLEAN VERSION)
     ============================================= */
  .taskbar {
    height: var(--taskbar-height) !important;
    padding: 4px 8px !important;
  }

  .start-button {
    padding: 4px 10px !important;
    font-size: 13px !important;
  }

  .start-button img {
    width: 20px !important;
    height: 20px !important;
  }

  /* HIDE TASKBAR SHORTCUTS ON MOBILE - CRITICAL */
  .taskbar-shortcuts {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  .taskbar-shortcut-wrapper {
    display: none !important;
  }
  
  .taskbar-shortcut {
    display: none !important;
  }
  
  .taskbar-dropdown {
    display: none !important;
  }

  .taskbar-programs {
    display: none !important;
  }

  .system-tray {
    font-size: 12px !important;
    padding: 4px 10px !important;
    margin-left: auto !important;
  }

  /* =============================================
     START MENU - MOBILE
     ============================================= */
  .start-menu {
    left: 0 !important;
    top: var(--taskbar-height) !important;
    min-width: 220px !important;
    max-width: 300px !important;
    width: 80vw !important;
  }

  .start-menu-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .start-menu-item img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
  }

  /* =============================================
     SUBMENU - MOBILE ACCORDION STYLE
     ============================================= */
  
  /* Reset submenu positioning for mobile */
  .start-submenu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    border: none !important;
    border-top: 1px solid #808080 !important;
    min-width: auto !important;
    width: 100% !important;
    display: none !important;
    background: #d4d4d4 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Show submenu when expanded */
  .start-menu-item.has-submenu.expanded .start-submenu {
    display: block !important;
  }
  
  /* Arrow rotation */
  .start-menu-item.has-submenu .arrow {
    transition: transform 0.2s ease !important;
  }
  
  .start-menu-item.has-submenu.expanded .arrow {
    transform: rotate(90deg) !important;
  }
  
  /* Submenu items - CRITICAL iOS FIXES */
  .start-submenu-item {
    padding: 12px 16px 12px 48px !important;
    font-size: 14px !important;
    color: #000000 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 1px solid #aaa !important;
    background: #d4d4d4 !important;
    -webkit-text-fill-color: #000000 !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .start-submenu-item:last-child {
    border-bottom: none !important;
  }
  
  .start-submenu-item:active {
    background: #000080 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  
  .start-submenu-item img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
  }
  
  .start-submenu-item span {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-text-fill-color: inherit !important;
  }
  
  /* Fix any anchor tags that might exist */
  .start-submenu a,
  .start-submenu a:link,
  .start-submenu a:visited,
  .start-submenu a:hover,
  .start-submenu a:active,
  .start-submenu a span,
  .start-submenu-item,
  .start-submenu-item span {
    color: #000000 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #000000 !important;
  }
  
  .start-submenu a:active,
  .start-submenu a:active span,
  .start-submenu-item:active,
  .start-submenu-item:active span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* =============================================
     WINDOWS - FULL SCREEN ON MOBILE
     ============================================= */
  .window {
    position: fixed !important;
    top: var(--taskbar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .window-titlebar {
    padding: 6px 4px !important;
    cursor: default !important;
  }

  .window-titlebar-text {
    font-size: 14px !important;
  }

  .window-btn {
    width: 28px !important;
    height: 24px !important;
    font-size: 14px !important;
  }

  .window-menubar {
    display: none !important;
  }

  .window-content {
    margin: 8px !important;
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Project Windows - Stack Layout */
  .project-window .window-content {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .project-screenshot {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
  }

  .project-title {
    font-size: 16px !important;
  }

  .project-description {
    font-size: 13px !important;
  }

  .project-meta {
    font-size: 12px !important;
  }

  .project-link {
    padding: 8px 16px !important;
    font-size: 13px !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  /* About Gallery - Stack */
  .about-gallery {
    flex-direction: column !important;
    align-items: center !important;
  }

  .about-photo {
    width: 100% !important;
    max-width: 250px !important;
    height: auto !important;
  }

  .about-text {
    min-width: auto !important;
  }

  /* About Window - Mobile Layout */
  #about-window .window-content {
    flex-direction: column !important;
    padding: 0 !important;
  }

  #about-window .window-content > div:first-child {
    width: 100% !important;
    height: 220px !important;
    flex-shrink: 0 !important;
  }

  #about-window .window-content > div:first-child img {
    height: 220px !important;
    object-position: center 20% !important;
  }

  #about-window .window-content > div:last-child {
    padding: 20px !important;
  }

  #about-window .window-content h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }

  #about-window .window-content p {
    font-size: 13px !important;
  }

  #about-window .window-content h3 {
    font-size: 11px !important;
  }

  /* TikTok Feed - Single Column */
  .tiktok-feed {
    grid-template-columns: 1fr !important;
  }

  /* Language Switcher - in taskbar */
  .lang-switch {
    margin-right: 6px !important;
  }
  
  .lang-btn {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }
  
  /* =============================================
     HIDE/SHOW MOBILE ELEMENTS
     ============================================= */
  .hide-mobile {
    display: none !important;
    visibility: hidden !important;
  }
  
  .show-mobile-only {
    display: flex !important;
  }
  
  .show-mobile {
    display: block !important;
  }
}

/* Very Small Screens */
@media screen and (max-width: 375px) {
  .desktop {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .icon-label {
    font-size: 9px !important;
  }

  .desktop-icon img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Landscape Mobile - Adjust */
@media screen and (max-width: 896px) and (orientation: landscape) {
  .desktop {
    grid-template-columns: repeat(auto-fill, 95px) !important;
    grid-auto-flow: column !important;
  }

  .window {
    max-width: 80vw !important;
    max-height: calc(100vh - var(--taskbar-height) - 20px) !important;
    width: auto !important;
    height: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
  .desktop-icon:hover {
    background: transparent !important;
  }

  .desktop-icon:active {
    background: rgba(0, 0, 128, 0.3) !important;
  }

  .start-button:hover,
  .start-menu-item:hover,
  .window-btn:hover,
  .project-link:hover {
    /* Disable hover states for touch */
  }
}

/* DEFAULT STATES - Outside media queries */
.show-mobile-only {
  display: none !important;
}

.show-mobile {
  display: none;
}