.site-header {
   display: flex;
   align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   background-color: #4A90E2;
   color: white;
   padding: 0 15px;  
   height: 40px;
   z-index: 1000;
}
    
.site-header .horizontal-menu-container {
   display: flex;
   flex-grow: 1;
   justify-content: flex-start; 
   align-items: center;
   height: 100%;
   overflow: hidden; 
   padding: 0;
   margin: 0;
}

.site-header .horizontal-menu-container .menu-item {
   display: inline-block;
   color: white;
   padding: 0 12px; 
   margin: 0 4px;   
   text-decoration: none;
   line-height: 60px; 
   font-size: 1.3rem; 
   font-weight: 500;
   border-radius: 0;
   background-color: transparent;
   transition: background-color 0.2s ease, color 0.2s ease;
   white-space: nowrap;
}

.site-header .horizontal-menu-container .menu-item:hover {
   background-color: rgba(255, 255, 255, 0.15);
   color: #f0f0f0;
}  
  
.site-header .title {
   font-size: 1.8rem;
   font-weight: bold;
   margin-right: auto;
   flex-shrink: 0;
   white-space: nowrap;
}

.site-header .logout-button {
   font-size: 0.9rem;
   color: white;
   text-decoration: none;
   border: 1px solid white;
   padding: 6px 12px;
   border-radius: 4px;
   white-space: nowrap;
   margin-left: 15px;
   flex-shrink: 0;
}

.site-header .logout-button:hover {
   background: rgba(255,255,255,0.2);
}
    
 /* === Title and Message Bar (Fixed below main header) === */
 
.title-message-bar-fixed-container {
   position: fixed;
   top: 40px; /* Below the 40px .site-header */
   left: 0;
   width: 100%;
   background-color: #f4f6f8;
   z-index: 999;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
   padding: 3px 0; /* Overall padding for the bar */
   box-sizing: border-box;
   height: 30; /* Let content determine height, or set fixed if preferred */
}
 
.title-message-bar {
   width: 95%;
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column; /* Title line, then messages line */
   align-items: center; /* Center title line */
   box-sizing: border-box;
}
 
.title-message-bar .bar-line {
   width: 100%;
   box-sizing: border-box;
   padding: 1px 5px; /* Minimal padding for each line */
   line-height: 1.2;
}

.title-message-bar .message-text {
   text-align: center;
   font-size: 1rem;
   color: #333;
   margin-bottom: 2px; /* Space between title and message line */
}

.title-message-bar .error-text {
   color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #f5c6cb;
}
 
.title-message-bar .success-text {
   color: #155724;
   background-color: #d4edda;
   border: 1px solid #c3e6cb;
}

/* New class for increasing the size of the question mark icon */
.help-button-large {
    font-size: 2.0em !important; /* Increased size (e.g., 2.0em is about 33% larger than 1.5em) */
    line-height: 1; 
}

/* General styling for the question mark icon (for spacing) */
.help-button-active,
.help-button-deactivated {
    font-weight: bold;
    text-decoration: none;
    margin-right: 15px; /* Spacing between help and logout */
    /* Ensure other shared properties are here */
}

/* DEACTIVATED STATE */
.help-button-deactivated {
    color: #A9A9A9; /* Grey color as requested */
    cursor: default; /* Not clickable */
}

/* ACTIVE STATE */
.help-button-active {
    color: #FFFFFF; /* Standard link color */
    cursor: pointer; /* Clickable */
}

.help-button-active:hover {
    color: #D3D3D3; /* Hover effect */
}

    
/* Responsive adjustments for the horizontal menu container */
@media (max-width: 768px) {
   .site-header .horizontal-menu-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.3) transparent;
   }
  
   .site-header .horizontal-menu-container::-webkit-scrollbar {
      height: 4px;
   }

   .site-header .horizontal-menu-container::-webkit-scrollbar-thumb {
      background-color: rgba(255,255,255,0.3);
      border-radius: 10px;
   }
   
   .site-header .horizontal-menu-container::-webkit-scrollbar-track {
      background: transparent;
   }
  
   .site-header .horizontal-menu-container .menu-item {
      padding: 0 10px;
      font-size: 0.85rem; /* Slightly smaller for tablets */
      margin: 0 3px;
   }
}
  
@media (max-width: 480px) { /* Phone */
   .site-header .horizontal-menu-container .menu-item {
      padding: 0 8px;
      font-size: 0.8rem;
      /* line-height: 52px;
   }
}

@media (max-width: 768px) {
   .site-header .title { font-size: 1.4rem; }
   .site-header .logout-button { font-size: 0.85rem; padding: 5px 10px; }
   .title-message-bar .screen-title-line { font-size: 1rem; }
   .title-message-bar .message-text { max-width: 250px; font-size: 0.7rem; }
}

@media (max-width: 480px) {
   .site-header .title { font-size: 1.2rem; }
   .site-header .logout-button { padding: 4px 8px; font-size: 0.8rem; }
   .title-message-bar .screen-title-line { font-size: 0.9rem; }
   .messages-content-area {
       /* On very small screens, maybe messages should stack or take more width */
       align-items: center; /* Center messages if they take full width */
   }
   .title-message-bar .message-text { max-width: 100%; white-space: normal; text-align: center; }
}