/* Mobile UI Fixes for CasinoRankr - Enhanced Version */

/* 1. MOBILE HEADER SOCIAL ICONS FIX - Ultra High Specificity */
@media (max-width: 900px) {
  /* Ensure social icons are visible and properly styled in mobile header */
  .main-header .header-content .social-nav.header-social {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 8px !important;
    align-items: center !important;
    height: 100% !important;
    order: 2 !important; /* Position after logo */
    position: relative !important;
    z-index: 10 !important;
  }
  
  .main-header .header-content .social-nav.header-social a {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    overflow: visible !important;
    position: relative !important;
  }
  
  .main-header .header-content .social-nav.header-social a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
  }
  
  .main-header .header-content .social-nav.header-social a i {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    color: #e6edf3 !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Special handling for Facebook icon to prevent cutoff */
  .main-header .header-content .social-nav.header-social a.facebook-link,
  .main-header .header-content .social-nav.header-social a[href*="facebook"] {
    width: 38px !important;
    height: 38px !important;
    overflow: visible !important;
  }
  
  .main-header .header-content .social-nav.header-social a.facebook-link i,
  .main-header .header-content .social-nav.header-social a[href*="facebook"] i {
    font-size: 16px !important;
  }
  
  /* Header content layout fix - Ultra High Specificity */
  .main-header .header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 15px !important;
    height: 70px !important; /* Fixed height to prevent gaps */
    flex-direction: row !important;
    position: relative !important;
  }
  
  .main-header .header-content .header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    order: 1 !important;
    flex-grow: 0 !important;
  }
  
  /* Desktop navigation hidden on mobile */
  .main-header .main-nav.desktop-only {
    display: none !important;
  }
}

/* 2. HEADER GAP REMOVAL - Ultra High Specificity */
@media (max-width: 900px) {
  /* Remove all unwanted gaps below header */
  .main-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: 70px !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  
  .main-header + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .main-header + .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .main-header + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .main-header + main .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Hero section spacing adjustment */
  .hero-section {
    margin-top: 0 !important;
    padding-top: 70px !important; /* Exact header height, no additional gap */
  }
  
  /* Container spacing fix */
  .container {
    margin-top: 0 !important;
  }
  
  /* Body padding to account for fixed header */
  body {
    padding-top: 0 !important; /* Remove body padding, use hero section padding instead */
  }
  
  /* Ensure main content starts right after header */
  main#mainContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  main#mainContent .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Featured Casinos section - special handling */
  .hero-section + section,
  section:first-of-type {
    margin-top: 0 !important;
    padding-top: 10px !important; /* Small padding for sections after hero */
  }
  
  /* Aggressive gap removal for hero section */
  .hero-section * {
    margin-top: 0 !important;
  }
  
  .hero-section h1:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 3. MOBILE NAVIGATION ACTIVE STATE ENHANCEMENT */
@media (max-width: 900px) {
  /* Improved active state for mobile nav */
  .mobile-nav-link.active {
    color: #F5D76E !important; /* Gold color to match brand */
    background: rgba(245, 215, 110, 0.1) !important;
    border-radius: 8px !important;
    position: relative !important;
  }
  
  .mobile-nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 20px !important;
    height: 3px !important;
    background: #F5D76E !important;
    border-radius: 2px !important;
  }
  
  .mobile-nav-link.active i {
    color: #F5D76E !important;
  }
  
  .mobile-nav-link.active span {
    color: #F5D76E !important;
    font-weight: 600 !important;
  }
  
  /* Hover state improvement */
  .mobile-nav-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
  }
  
  /* Better spacing for mobile nav items */
  .mobile-nav-link {
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
  }
}

/* 4. LOGO SIZE OPTIMIZATION FOR MOBILE */
@media (max-width: 900px) {
  .main-header .header-content .logo-link svg {
    height: 48px !important;
    width: auto !important;
    max-width: 200px !important;
  }
  
  .main-header .header-content .logo-link svg text {
    font-size: 28px !important;
    y: 32 !important;
    fill: #F5D76E !important; /* Consistent gold color */
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important; /* Match mobile styling */
  }
}

/* 5. SMALL PHONE ADJUSTMENTS */
@media (max-width: 480px) {
  .main-header .header-content .social-nav.header-social {
    gap: 6px !important;
  }
  
  .main-header .header-content .social-nav.header-social a {
    width: 32px !important;
    height: 32px !important;
  }
  
  .main-header .header-content .social-nav.header-social a i {
    font-size: 16px !important;
  }
  
  .main-header .header-content .social-nav.header-social a.facebook-link,
  .main-header .header-content .social-nav.header-social a[href*="facebook"] {
    width: 34px !important;
    height: 34px !important;
  }
  
  .main-header .header-content {
    padding: 0 12px !important;
  }
  
  .main-header .header-content .logo-link svg {
    height: 44px !important;
  }
  
  .main-header .header-content .logo-link svg text {
    font-size: 26px !important;
    y: 30 !important;
    fill: #F5D76E !important; /* Consistent gold color */
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important; /* Match mobile styling */
  }
}

/* 6. EMAIL LINK SPECIFIC STYLING */
@media (max-width: 900px) {
  .main-header .header-content .social-nav.header-social a[href^="mailto:"] {
    /* Ensure email icon displays properly */
    display: flex !important;
    visibility: visible !important;
  }
  
  .main-header .header-content .social-nav.header-social a[href^="mailto:"] i.fa-envelope {
    font-size: 16px !important; /* Slightly smaller for better balance */
  }
}

/* 7. OVERRIDE ANY INLINE STYLES - Nuclear Option */
@media (max-width: 900px) {
  .social-nav.header-social[style] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .social-nav.header-social a[style] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .social-nav.header-social a i[style] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}