/* The link is part of the light DOM, so portfolio-header leaves it in place. */
portfolio-header.hero-bar:has(> .site-language-switch) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

portfolio-header > .site-language-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .5rem;
  color: var(--ink, #e4ede7);
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--soft, #a8b9b0);
}

portfolio-header > .site-language-switch:hover,
portfolio-header > .site-language-switch:focus-visible {
  color: var(--accent, #3ecfa2);
  border-color: currentColor;
}

portfolio-header > .site-language-switch:focus-visible {
  outline: 2px solid var(--accent, #3ecfa2);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  portfolio-header.hero-bar:has(> .site-language-switch) {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 4px;
  }
  portfolio-header > .site-language-switch { grid-column: 4; grid-row: 1; padding: 4px; }
  portfolio-header:has(> .site-language-switch) .hero-socials { min-width: 128px; }
  portfolio-header:has(> .site-language-switch) .email-label { display: none; }
  portfolio-header:has(> .site-language-switch) .hero-email { min-width: 32px; justify-content: center; }
  portfolio-header:has(> .site-language-switch) .email-icon { display: block; width: 9px; height: 9px; }
  portfolio-header:has(> .site-language-switch) .header-scene { position: static; }
  portfolio-header:has(> .site-language-switch) .scene-panel { right: 20px; }
}

@media (max-width: 389px) {
  portfolio-header:has(> .site-language-switch) .dots { display: none; }
}