/* Custom stylesheet for .vpnBanner element */

.vpnBanner {
  height: 42px;
}

/* */
.home 
.header-searchbox-container {
background-color: #45b97c;
}

.home
.linked-cards {
margin:
0 0
2em;
}

.home .header-searchbox-container .summonBtn {
    border-color: var(--home-page-primary-color,#0e1d2b);
    color: #231f20;
}

/* Targets the h1.title inside any element with 
  data-aid="primary-announcements" 
*/
[data-aid="primary-announcements"] h1.title {
  /* Example: Sets top/bottom margin to 20px, left/right to 0 */
  margin: 20px 0; 
  
  /* Example: Adds 10px of padding on all sides */
  padding: 10px; 
}

/* Targets the div with the class Header-searchbox-container */
.Header-searchbox-container {
  /* Example: Sets top/bottom margin to 20px, left/right to auto or 0 */
  margin: 20px auto; 
}

/* This will override an inline style="..." attribute */
#topLinks {
  padding-top: 14px !important;
}

/*
  This specifically targets the "Meld een probleem" link 
  (which has data-aid="Feedback") and makes its text bold.
*/
a[data-aid="Feedback"] {
  font-weight: bold !important; 
}

/*
  ========================================
  RULE 1: VISIBILITY LOGIC
  This hides the link's <li> if the button is visible.
  ========================================
*/
div#topLinks:has(button[data-aid="research-assistant-tab"]:not(.ng-hide)) li[ng-repeat]:has(a[data-aid="AI Research Assistant"]) {
  display: none !important;
}

/*
  ========================================
  RULE 2: ICON
  This adds the sparkle icon and makes it black & white.
  ========================================
*/
a[data-aid="AI Research Assistant"]::before {
  /* This is the sparkle emoji (✨) */
  content: "\2728"; 
  
  /* This forces the emoji to render in grayscale */
  filter: grayscale(100%);
  
  /* Space between icon and text */
  margin-right: 5px;
}

/*
  ========================================
  RULE 3: LAYOUT STYLING
  This applies only the layout rules you provided.
  ========================================
*/
a[data-aid="AI Research Assistant"] {
  display: inline-block !important;
  margin-bottom: 0 !important;
  font-weight: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border-radius: 2px !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  
  /* This removes the default underline */
  text-decoration: none !important;
}

/*
  ========================================
  NEW RULE 4: REMOVE HOVER UNDERLINE
  This explicitly removes any underline on mouse hover.
  ========================================
*/
a[data-aid="AI Research Assistant"]:hover {
  text-decoration: none !important;
}