/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

/* Search Service Modal Fixes */

/* Remove any browser-injected clear buttons */
#search-service-modal input[type="search"]::-webkit-search-cancel-button,
#search-service-modal input[type="search"]::-webkit-search-decoration,
#search-service-modal input[type="search"]::-webkit-search-results-button,
#search-service-modal input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* User Avatar Styling - Primary color with white text when logged in */
.navbar .navigation .dropdown-toggle .avatar[data-avatar-name] {
  background-color: var(--ghost-accent-color);
  color: white;
}

.navbar .navigation .dropdown-toggle .avatar[data-avatar-name]::before {
  color: white;
}

/* Hover state for logged-in user avatar */
.navbar .navigation .dropdown-toggle:hover .avatar[data-avatar-name] {
  background-color: var(--ghost-accent-color);
  filter: brightness(1.1);
}

/* Ensure the dropdown user avatar also has the same styling */
.dropdown-user-login .dropdown-user-head .avatar[data-avatar-name] {
  background-color: var(--ghost-accent-color);
  color: white;
}

.dropdown-user-login .dropdown-user-head .avatar[data-avatar-name]::before {
  color: white;
}

/* Adjust font size for two-letter initials */
.avatar[data-avatar-name]::before {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.avatar-large[data-avatar-name]::before {
  font-size: 1rem;
  letter-spacing: 0.05em;
}