/* 
 * Header Consistency Fix
 * Ensures navbar and above-header maintain consistent sizing across all pages
 * regardless of root font-size changes (like those in the experience page)
 */

/* Above Header - Fixed sizing to prevent scaling issues */
.above-header {
    padding: 3px 0 !important; /* Ultra-compact 3px padding for minimal header */
    font-size: 12px !important; /* Smaller font size */
    line-height: 1.2;
}

.above-header .ast-custom-html,
.above-header a {
    font-size: 12px !important;
}

.above-header a {
    margin-right: 16px !important; /* Fixed 16px instead of var(--space-md) */
}

.above-header .social-icons a {
    font-size: 11px !important;
    margin-left: 10px !important;
}

/* Navbar - Fixed sizing to prevent scaling issues */
.navbar {
    padding: 4px 16px !important; /* Ultra-compact navbar padding */
}

.navbar-brand img {
    height: 50px !important; /* Ensure logo stays consistent */
}

.navbar .nav-link {
    font-size: 20px !important; /* Fixed 20px instead of 1.25rem */
}

.navbar .btn {
    font-size: 20px !important; /* Fixed 20px for consistency */
}

.navbar-toggler {
    font-size: 20px !important; /* Fixed 20px instead of 1.25rem */
    padding: 4px 8px !important; /* Fixed padding instead of 0.25rem 0.5rem */
}

/* Dropdown menu consistency */
.navbar .dropdown-item {
    font-size: 16px !important; /* Fixed font size for dropdown items */
    padding: 8px 16px !important; /* Fixed padding */
}

/* Ensure header area doesn't inherit experience page scaling */
.header-area {
    font-size: 16px !important; /* Force normal font size for header area */
}

.header-area * {
    font-size: inherit !important; /* Let header area children inherit the fixed size */
}

/* Override any experience page specific scaling for header */
body .header-area .above-header,
body .header-area .navbar {
    font-size: 16px !important; /* Ensure header components use standard sizing */
}

/* Media queries to maintain responsiveness while keeping consistent sizing */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 16px !important; /* Fixed padding instead of 1rem */
    }
    
    .navbar-nav .nav-item {
        margin-bottom: 8px !important; /* Fixed margin instead of 0.5rem */
    }
    
    .dropdown-menu {
        margin-top: 8px !important; /* Fixed margin instead of 0.5rem */
    }
}

/* Ensure the header area elements always use consistent sizing regardless of page */
@media screen and (min-width: 1920px) and (max-width: 2559px),
       screen and (min-width: 1600px) and (max-width: 1919px),
       screen and (max-width: 1599px) {
    
    .header-area,
    .header-area .above-header,
    .header-area .navbar {
        font-size: 16px !important;
    }
    
    .header-area .above-header {
        padding: 3px 0 !important;
    }
    
    .header-area .navbar {
        padding: 4px 16px !important;
    }
    
    .header-area .nav-link,
    .header-area .btn {
        font-size: 20px !important;
    }
    
    .header-area .above-header .ast-custom-html,
    .header-area .above-header a {
        font-size: 11px !important;
    }
}

/* Mobile responsive fixes for above header layout - Override consistency styles on mobile */
@media (max-width: 480px) {
  .above-header {
    padding: 4px 0 !important;
    font-size: 11px !important;
    line-height: 1.3;
  }
  
  .above-header .container {
    align-items: center !important;
  }
  
  .above-header .ast-custom-html {
    font-size: 10px !important;
    flex-shrink: 1;
    margin-right: 8px !important;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip;
    max-width: none;
    flex: 1;
  }
  
  .above-header .header-right-section {
    flex-shrink: 0;
  }
  
  .above-header .social-icons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  
  .above-header .social-icons a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1px 2px !important;
    font-size: 11px !important;
    line-height: 1;
    min-width: auto !important;
    display: inline-block !important;
  }
  
  .above-header .social-icons a i {
    font-size: 11px !important;
  }
}

/* iPhone SE and similar (375px) specific fixes - Most critical for user's issue */
@media (max-width: 375px) {
  .above-header {
    padding: 3px 0 !important;
    font-size: 10px !important;
  }
  
  .above-header .ast-custom-html {
    font-size: 9px !important;
    max-width: none !important;
    flex: 1;
  }
  
  .above-header .social-icons {
    gap: 1px !important;
    flex-shrink: 0;
  }
  
  .above-header .social-icons a {
    padding: 1px !important;
    font-size: 10px !important;
  }
  
  .above-header .social-icons a i {
    font-size: 10px !important;
  }
}

/* Very small screens (360px and below) */
@media (max-width: 360px) {
  .above-header .ast-custom-html {
    font-size: 8px !important;
    max-width: none !important;
    flex: 1;
  }
  
  .above-header .social-icons {
    gap: 1px !important;
    flex-shrink: 0;
  }
  
  .above-header .social-icons a {
    padding: 0px 1px !important;
    font-size: 9px !important;
  }
  
  .above-header .social-icons a i {
    font-size: 9px !important;
  }
}