/* CasinoRankr Standardized Mobile Header - Universal Solution */

/* HIDE DESKTOP HEADER ON MOB  /* BODY PADDING FOR FIXED HEADER - Ultra minimal gap */
  html body,
  body.mobile-ready,
  html body.mobile-ready {
    padding-top: 35px !important; /* Ultra tight - header is 45px, padding only 35px */
    padding-bottom: 60px !important;
  }@media (max-width: 900px) {
  .main-header {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* SHOW MOBILE HEADER ONLY ON MOBILE */
@media (min-width: 901px) {
  .mobile-header-standard {
    display: none !important;
  }
}

/* STANDARDIZED MOBILE HEADER STYLES */
@media (max-width: 900px) {
  .mobile-header-standard {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px 10px 15px !important; /* Balanced padding */
    background-color: #1c2331 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60px !important; /* Reduced from 70px to minimize gap */
    z-index: 1000 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid #30363d !important;
    overflow: visible !important;
  }
  
  .mobile-header-logo {
    flex: 0 0 auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .mobile-header-logo svg {
    height: 48px !important; /* Slightly smaller to fit better in 60px header */
    width: auto !important;
    max-width: 200px !important; /* Give more room for social icons */
  }
  
  .mobile-header-logo svg text {
    font-size: 30px !important; /* Proportionally smaller for 48px height */
    y: 38 !important; /* Adjusted for smaller SVG */
    fill: #F5D76E !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important;
  }
  
  .mobile-header-social {
    display: flex !important;
    gap: 14px !important; /* Increased gap for better spacing */
    align-items: center !important;
    height: 100% !important;
    padding-right: 5px !important; /* Reduced to give more space */
    overflow: visible !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
    margin-left: 15px !important; /* Add margin to separate from logo */
  }
  
  .mobile-header-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important; /* Reduced from 44px to fit better */
    height: 38px !important; /* Reduced from 44px to fit better */
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    color: #e6edf3 !important;
  }
  
  .mobile-header-social a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
  }
  
  .mobile-header-social a i {
    font-size: 18px !important; /* Reduced from 20px to fit smaller icons */
    color: #e6edf3 !important;
    line-height: 1 !important;
  }
  
  /* BODY PADDING FOR FIXED HEADER - Extreme minimal gap */
  html body,
  body.mobile-ready,
  html body.mobile-ready {
    padding-top: 38px !important; /* Reduced from 42px for ultra tight gap */
    padding-bottom: 60px !important;
  }
  
  /* ENSURE CONTENT STARTS PROPERLY */
  main#mainContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  main#mainContent .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  section {
    margin-top: 0 !important;
  }
  
  .hero-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  
  /* AGGRESSIVE GAP REMOVAL - Force minimal spacing */
  .mobile-header-standard + *,
  .mobile-header-standard ~ main,
  .mobile-header-standard ~ * {
    margin-top: -20px !important; /* Even more aggressive - pull content up */
  }
  
  /* Target the first content section specifically */
  .featured-casinos:first-of-type,
  main .container:first-child,
  section:first-of-type {
    margin-top: -20px !important;
    padding-top: 15px !important; /* Increase padding to prevent overlap */
  }
}