/* ===== LeronX Header & Theme Toggle Responsive Fixes ===== */
/* File: /www/wwwroot/leronx.org/assets/css/header-fix.css */

/* 
 * Problem 1: Theme toggle button (position:fixed, top:12px, right:12px) 
 * overlaps with nav action buttons (Loslegen, Anmelden) on screens 1024-1180px
 * 
 * Problem 2: Desktop nav items (Karriere, Partner) can overlap at 1024-1100px
 * because the grid uses minmax(0,1fr) auto minmax(0,1fr) but items don't shrink
 */

/* Fix 1: Move theme toggle to bottom-right corner on screens where it overlaps nav */
@media (max-width: 1180px) {
  .lx-theme-toggle {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
  }
}

/* Fix 2: Tighten desktop nav spacing at intermediate sizes (1024-1180px) */
@media (min-width: 1024px) and (max-width: 1180px) {
  /* Override grid to be more flexible */
  .lx-desktop-header {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 0.5rem !important;
  }
  
  /* Reduce spacing between nav links */
  .lx-desktop-header__nav {
    gap: 0 !important;
  }
  
  /* Smaller font and padding for nav triggers */
  #site-header .lx-nav-trigger,
  .lx-desktop-header__nav a {
    padding-inline: 6px !important;
    font-size: 13px !important;
  }
  
  /* Reduce action buttons spacing */
  .lx-desktop-header__actions {
    gap: 0.4rem !important;
  }
  
  /* Slightly smaller action buttons */
  .lx-desktop-header__actions a {
    font-size: 13px !important;
    padding-inline: 10px !important;
  }
}

/* Fix 3: Ensure no overflow on any screen */
@media (min-width: 1024px) {
  #site-header > .container {
    overflow: visible;
  }
  
  .lx-desktop-header__nav {
    overflow: hidden;
    min-width: 0;
  }
}

/* Fix 4: Mobile - ensure theme toggle doesn't overlap mobile nav */
@media (max-width: 1023px) {
  .lx-theme-toggle {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
  }
}