/**
 * Mobile Critical Fixes
 * Critical fixes to prevent crashes and layout issues on mobile
 */

/* ===== PREVENT HORIZONTAL SCROLL ===== */

/* Fix 100vw causing horizontal scroll on mobile */
html {
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Fix lightbox and overlays - use 100% instead of 100vw */
.lightbox-overlay,
.custom-lightbox-overlay,
.simple-lightbox-overlay {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fix gallery outer container */
.gallery-outer {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fix terminal fullscreen */
#terminal-output {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== MOBILE SWIPER FIXES ===== */

@media screen and (max-width: 768px) {
  /* Fix swiper slides to prevent overflow */
  .featured-notes-swiper .swiper-slide {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
  }

  .featured-notes-swiper,
  .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Ensure images don't cause overflow */
  .featured-notes-swiper .swiper-slide .image,
  .featured-notes-swiper .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .featured-notes-swiper .swiper-slide {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }
}

/* ===== NAVIGATION MOBILE FIXES ===== */

@media screen and (max-width: 1023px) {
  .glassmorphic-nav {
    max-width: calc(100% - 2rem) !important;
  }
}

@media screen and (max-width: 768px) {
  .glassmorphic-nav {
    max-width: calc(100% - 1.5rem) !important;
  }
}

@media screen and (max-width: 480px) {
  .glassmorphic-nav {
    max-width: calc(100% - 1rem) !important;
  }
}

/* ===== PREVENT LAYOUT SHIFT ON MOBILE ===== */

@media screen and (max-width: 768px) {
  /* Ensure all containers use safe widths */
  .container,
  .section,
  .hero,
  main {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix columns overflow */
  .columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .column {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ===== IMAGE AND MEDIA MOBILE FIXES ===== */

@media screen and (max-width: 768px) {
  /* Ensure all images respect container width */
  img,
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fix figure overflow */
  figure,
  .image {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Fix card images */
  .card-image,
  .card-image figure,
  .card-image .image {
    max-width: 100% !important;
  }
}

/* ===== FIXED POSITION ELEMENTS ON MOBILE ===== */

@media screen and (max-width: 768px) {
  /* Ensure fixed elements don't cause overflow */
  .glassmorphic-nav,
  .navbar,
  .navbar-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Fix lightbox positioning */
  .lightbox-overlay,
  .custom-lightbox-overlay {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
}

/* ===== PERFORMANCE: DISABLE HEAVY EFFECTS ON MOBILE ===== */

@media screen and (max-width: 768px) {
  /* Disable backdrop-filter on low-end mobile devices */
  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
    /* Keep blur on supported devices */
  }

  @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    /* Fallback for devices without backdrop-filter support */
    .glassmorphic,
    .glassmorphic-nav,
    .navbar-menu {
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    [data-theme="dark"] .glassmorphic,
    [data-theme="dark"] .glassmorphic-nav,
    [data-theme="dark"] .navbar-menu {
      background: rgba(20, 20, 20, 0.98) !important;
    }
  }

  /* Disable complex shadows on mobile for performance */
  .is-mobile .card,
  .is-mobile .box,
  .is-mobile .button {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
}

/* ===== TOUCH INTERACTION IMPROVEMENTS ===== */

@media (hover: none) and (pointer: coarse) {
  /* Remove hover-dependent features */
  .tooltip {
    display: none !important;
  }

  /* Ensure buttons are always visible (not hover-only) */
  .hover-reveal {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Increase tap targets for links in text */
  .content a,
  p a {
    padding: 0.25rem 0.125rem;
    margin: -0.25rem -0.125rem;
  }
}

/* ===== PREVENT ZOOM ON INPUT FOCUS (iOS) ===== */

@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
}

/* ===== SAFE AREA INSETS (iPhone X+) ===== */

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .glassmorphic-nav {
    padding-left: max(1.5rem, calc(1.5rem + env(safe-area-inset-left)));
    padding-right: max(1.5rem, calc(1.5rem + env(safe-area-inset-right)));
  }

  @media screen and (max-width: 768px) {
    .navbar-menu {
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
  }
}

/* ===== MOBILE SCROLLING IMPROVEMENTS ===== */

@media screen and (max-width: 768px) {
  /* Smooth scrolling on iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Fix momentum scrolling */
  body,
  .navbar-menu,
  .modal,
  .dropdown-menu {
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== CONTENT VISIBILITY FOR PERFORMANCE ===== */

@media screen and (max-width: 768px) {
  /* Use content-visibility for off-screen content */
  .masonry-card,
  .gallery-item,
  .post-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
  }
}

/* ===== EMERGENCY FIXES FOR PRODUCTION ===== */

/* Force hide console-dependent elements if they fail */
.is-mobile [data-requires-console] {
  display: none !important;
}

/* Ensure critical content is always accessible */
@media screen and (max-width: 768px) {
  main {
    min-height: 60vh;
  }

  /* Prevent absolute positioning issues */
  .hero,
  .section {
    position: relative !important;
  }
}