/* Custom styles for hero title and author box only */

/* Hero title section */
.hero-title {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

.hero-title .main-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.hero-title .subtitle {
    font-size: 1.5rem;
    opacity: 0.7;
    margin: 0;
    font-weight: 300;
}

/* Author box */
.author-box {
    background-color: var(--md-default-bg-color);
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.author-box p {
    margin: 0.25rem 0;
}

.author-box strong {
    font-weight: 600;
}

/* Hide left navigation sidebar to keep only the TOC on the right */
.md-sidebar--primary {
    display: none;
}

/* Increase left margin for content */
.md-content {
    margin-left: 2rem;
}

@media screen and (min-width: 76.25em) {
    .md-content {
        margin-left: 6rem;
    }
}

/* More subtle header - white/black background instead of blue */
.md-header {
    position: static; /* let the header scroll away */
    top: auto;
    background-color: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    box-shadow: 0 0 0.05rem rgba(0, 0, 0, 0.05), 0 0.05rem 0.1rem rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

/* Remove top padding since the header is no longer sticky */
.md-main {
    padding-top: 0;
}

/* Simplify header inner spacing */
.md-header__inner {
    padding: 0.4rem 0.8rem;
}

/* Ensure header elements are visible in both themes */
.md-header__button {
    color: var(--md-default-fg-color);
}

.md-header__title {
    color: var(--md-default-fg-color);
}

.md-header__source {
    color: var(--md-default-fg-color);
}

/* Fix search bar visibility on hover */
.md-search__input:hover,
.md-search__input:focus {
    background-color: var(--md-code-bg-color);
}

.md-search__input {
    background-color: var(--md-code-bg-color);
    color: var(--md-default-fg-color);
}

/* Fix search bar placeholder text color */
.md-search__input::placeholder {
    color: var(--md-default-fg-color);
    opacity: 0.6;
}

/* Mobile responsive adjustments for custom elements */
@media (max-width: 768px) {
    .hero-title .main-title {
        font-size: 2rem;
    }
    
    .hero-title .subtitle {
        font-size: 1.25rem;
    }
}

/* Floating bubbles styles */
.floating-bubbles {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.floating-bubbles-title {
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 12px;
  color: #777;
  text-align: right;
  font-weight: bold;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  white-space: nowrap;
}

.floating-bubbles:hover .floating-bubbles-title {
  opacity: 1;
  visibility: visible;
}

.bubble {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: transform 0.3s ease;
}

.bubble:hover {
  transform: scale(1.1);
}

.bubble img {
  width: 40px;
  height: 40px;
}

.bubble-tooltip {
  position: absolute;
  right: 60px;
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.bubble:hover .bubble-tooltip {
  opacity: 1;
  visibility: visible;
}

.floating-bubbles:hover .bubble-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hide on mobile */
@media (max-width: 768px) {
  .floating-bubbles {
    display: none;
  }
}