/* Header customization para DDT Banaketak */

/* === Logo personalizado === */
header #logo .custom_logo {
  display: inline-block;
  height: 2.8em;
  width: auto;
  vertical-align: middle;
  margin-inline-end: 0.2rem;
  position: relative;
  top: 0.2em;
}

/* === Layout del header === */
/* Estructura objetivo:
   <header>
     <div>
       <a#logo>(solo imagen)</a>
       <nav.header_links>enlaces</nav>
       <span.artist_name>nombre</span>
       {breadcrumb si existe}
     </div>
     <button.browse>...</button>
   </header>
*/

/* El div del header necesita flex para alinear los nuevos elementos */
header > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* === Enlaces de navegación === */
.header_links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.header_links a {
  color: var(--fg-3);
  padding: 0.3rem 0.5rem;
  text-decoration: none;
  font-size: 0.85em;
  border-radius: 0.3rem;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.header_links a:hover {
  color: var(--fg-1);
  background: var(--bg-3);
}

.header_links a:focus-visible {
  background: var(--fg-3);
  color: var(--bg-1);
  outline: none;
}

/* === Nombre del artista === */
.artist_name {
  color: var(--fg-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Separador visual antes del nombre del artista */
.artist_name::before {
  content: '›';
  margin-inline-end: 0.5rem;
  color: var(--fg-3);
}

/* === Responsive === */
@media (max-width: 600px) {
  .header_links a {
    padding: 0.2rem 0.4rem;
    font-size: 0.8em;
  }
  
  .artist_name {
    max-width: 120px;
  }
}

@media (max-width: 400px) {
  .header_links {
    display: none;
  }
  
  .artist_name::before {
    display: none;
  }
}