/* Sidebar mobile fixes, no overlay */
@media (max-width: 768px) {
  /* Prevent horizontal scrolling caused by long URLs and content */
  body {
    overflow-x: hidden !important;
  }
  
  /* Create a new stacking context to isolate sidebar */
  html {
    position: relative !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure sidebar container creates its own stacking context */
  .sidebar_container {
    width: 50px !important;
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    display: block !important;
    background-color: #1e2329 !important;
    transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
    backface-visibility: hidden !important;
    perspective: 1000px !important;
  }
  
  /* Hide desktop sidebar completely on mobile */
  .sidebar_menu_logos {
    display: none !important;
  }
  
  /* Show only mobile sidebar */
  .sidebar_menu_logos_small {
    display: block !important;
  }
  
  /* Mobile responsive grids - Stack vertically */
  .w-layout-grid.responsive-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 60px !important;
  }
  
  /* Fix certification gradient positioning on mobile */
  .responsive-grid[style*="background-image"] {
    background-position: center top !important;
    background-size: 100% auto !important;
    margin-top: 20px !important;
    padding-top: 40px !important;
  }
  
  /* Mobile main content styling */
  .main_content_container {
    background-color: #181d27 !important;
  }
  
  /* Break long URLs and text content to prevent overflow */
  .main_content_container,
  .div-block-16,
  p,
  a,
  .sidebar_links {
    word-break: break-word !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure main content doesn't exceed viewport width */
  .main_content_container {
    max-width: calc(100vw - 50px) !important;
    margin-left: 50px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow-x: hidden !important;
  }
  
  /* Prevent main content from affecting sidebar position */
  body {
    position: relative !important;
  }
  
  html {
    overflow-x: hidden !important;
  }
  
  /* Handle tables and other potentially wide elements */
  table {
    width: 100% !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
  }
  
  table td,
  table th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 0 !important;
  }
  
  /* Handle images and media - exclude responsive grid images */
  img:not(.responsive-grid img),
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Ensure markdown content images are visible on mobile */
  .div-block-16 img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Fix for any inline elements that might cause overflow */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Specific handling for URLs and long text strings */
  a[href*="http"],
  a[href*="www"],
  a[href*="://"],
  .url,
  .link {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
  }
  
  /* Additional safety for any text that might contain URLs */
  /* Fallback for browsers that don't support :has() */
  p,
  div,
  span,
  li {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* More aggressive breaking for elements that commonly contain URLs */
  .content,
  .description,
  .text,
  article {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }


  .sidebar_menu_logos_small {
    width: 50px !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile */
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important; /* Higher z-index */
    overflow: hidden !important;
    background-color: #1e2329 !important;
    transform: translate3d(0, 0, 0) !important; /* Force GPU acceleration */
    backface-visibility: hidden !important;
    will-change: transform !important;
    perspective: 1000px !important;
  }
  .sidebar_links {
    position: fixed;
    top: 0;
    left: 50px;
    transform: translateX(-100%);
    z-index: 1002;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease-in-out;
    max-width: calc(100vw - 50px) !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure sidebar content doesn't cause horizontal overflow */
  .sidebar_links * {
    word-break: break-word !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .sidebar_links.mobile-open {
    transform: translateX(0) !important;
    display: block !important;
    visibility: visible !important;
  }
  .side_windows, .side_linux, .side_web, .side_ai, .logo, .mczen_logo {
    cursor: pointer;
    user-select: none;
  }
  
  /* Ensure zap logo links don't navigate on mobile */
  @media (max-width: 768px) {
    a.logo.zap-home-link {
      pointer-events: none;
    }
    
    a.logo.zap-home-link img {
      pointer-events: auto;
      cursor: pointer;
    }
  }

  /* Fix hero video scaling on mobile - use cover to maintain aspect ratio */
  .w-background-video > video,
  .hero-video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  /* Ensure hero video container has proper height on mobile and remove any spacing */
  .w-background-video,
  .hero_video,
  .homepage-hero-fullwidth {
    min-height: 50vh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  
  /* Make hero video full width on mobile */
  .homepage-hero-fullwidth {
    margin-left: 0 !important;
    width: calc(100vw - 50px) !important;
    position: relative !important;
    left: 0 !important;
  }
  
  /* Additional override for homepage hero video container */
  .homepage-hero-fullwidth .w-background-video {
    height: 60vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Rotate mczen_logo link -90deg on mobile */
  .mczen_logo {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .mczen_logo > a {
    display: inline-block;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    padding-bottom: 10px;
  }

  /* Ensure sidebar stays fixed during scrolling */
  .sidebar_container,
  .sidebar_menu_logos_small {
    position: fixed !important;
    transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
  }
  
  /* Additional mobile sidebar fixes */
  .sidebar_container {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 50px !important;
    height: 100vh !important;
    z-index: 9999 !important;
  }
  
  .sidebar_menu_logos_small {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 50px !important;
    height: 100vh !important;
    z-index: 10000 !important;
    background-color: #1e2329 !important;
  }
}

/* Set h4 line height to 27px for markdown headings */
.div-block-16 h4 {
  line-height: 27px !important;
}

/* Desktop sidebar positioning and visibility */
@media (min-width: 769px) {
  .sidebar_menu_logos {
    display: block !important;
    position: relative !important;
  }
  
  .sidebar_menu_logos_small {
    display: none !important;
  }
  
  /* Ensure dannydekkers.nl text stays visible on desktop */
  .sidebar_menu_logos > div:last-child {
    position: absolute !important;
    left: 50% !important;
    bottom: 65px !important;
    transform: translateX(-50%) rotate(-90deg) !important;
    width: max-content !important;
    text-align: center !important;
    z-index: 1000 !important;
  }
  
  .sidebar_menu_logos > div:last-child a {
    color: #686f7d !important;
    font-size: 12px !important;
    text-decoration: none !important;
    opacity: 0.7 !important;
    display: block !important;
    white-space: nowrap !important;
  }
}

/* Highlighted Notes text color - more specific targeting */
.responsive-grid:not([style*="background-image"]) p {
  color: #697280 !important;
}

/* Highlighted Notes icons aspect ratio fix - ALL SCREEN SIZES */
.w-layout-grid.responsive-grid img,
.responsive-grid img {
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border: none !important;
  outline: none !important;
}

/* Desktop sizing for highlighted notes icons */
@media (min-width: 768px) {
  .w-layout-grid.responsive-grid img,
  .responsive-grid img {
    max-width: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    margin: 15px auto !important;
    display: block !important;
  }
}

@media (max-width: 767px) {
  /* Override general image rules for highlighted notes specifically */
  .w-layout-grid.responsive-grid img,
  .responsive-grid img {
    max-width: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    margin: 10px auto !important;
    display: block !important;
    border: none !important;
    outline: none !important;
    object-fit: contain !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  
  .responsive-grid div {
    padding: 20px 15px !important;
    text-align: center !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  
  .responsive-grid h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }
  
  .responsive-grid p {
    font-size: 12px !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
}

@media (max-width: 479px) {
  /* Override general image rules for highlighted notes specifically */
  .w-layout-grid.responsive-grid img,
  .responsive-grid img {
    max-width: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    margin: 8px auto !important;
    display: block !important;
    border: none !important;
    outline: none !important;
    object-fit: contain !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
  }
  
  .responsive-grid div {
    padding: 15px 10px !important;
    text-align: center !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}