/* English remains visible if JavaScript is unavailable. */
.lang-sv { display: none; }
html[lang="sv"] .lang-sv { display: block; }
.language-target { display: none; }
.language-switcher { position: absolute; top: 1rem; right: 1rem; display: inline-flex; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: .25rem; }
.language-switcher a { padding: .25rem .55rem; color: #fff; background: transparent; cursor: pointer; text-decoration: none; }
.language-switcher a + a { border-left: 1px solid rgba(255,255,255,.75); }
.language-switcher a[aria-pressed="true"] { color: #212529; background: #fff; }
.language-switcher a:focus-visible { outline: 3px solid #80bdff; outline-offset: -3px; }
.language-row { margin-bottom: 1rem; }
.language-row .language-content { flex: 0 0 100%; max-width: 100%; }
.language-row .language-spacer { display: none; }
.chord-sheet-intro::after { content: ""; display: block; clear: both; }
.chord-sheet-intro p { margin-bottom: 0; }
.folder-link { display: block; float: left; width: 72px; margin: .15rem 1rem .35rem 0; }
.folder-link svg { display: block; width: 72px; height: auto; filter: drop-shadow(4px 5px 2px rgba(0, 0, 0, .22)); }
.folder-link svg path[fill="#f5f7fa"] { fill: #ebe6d6; }
.folder-link:focus-visible { outline: 3px solid #80bdff; outline-offset: 3px; border-radius: .25rem; }
/* No-JavaScript fallback: English is the default; the links use :target to switch. */
.container .row > .col-sm-5:first-child { flex: 0 0 100%; max-width: 100%; }
.container .row > .col-sm-5:last-child,
.container .row > .col-sm-5 ~ .col-sm-1 { display: none; }
html[lang="sv"] .container .row > .col-sm-5:first-child,
#swedish:target ~ .container .row > .col-sm-5:first-child { display: none; }
html[lang="sv"] .container .row > .col-sm-5:last-child,
#swedish:target ~ .container .row > .col-sm-5:last-child { display: block; flex: 0 0 100%; max-width: 100%; }
#swedish:target ~ .container .lang-en { display: none; }
#swedish:target ~ .container .lang-sv { display: block; }
#swedish:target ~ .container .language-switcher [data-language="en"] { color: #fff; background: transparent; }
#swedish:target ~ .container .language-switcher [data-language="sv"] { color: #212529; background: #fff; }
@media (max-width: 575.98px) {
  .jumbotron {
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
  }
  .jumbotron .container-fluid {
    padding-top: 0;
  }
  .jumbotron h3 {
    margin-bottom: .15rem;
    font-size: 1.3rem;
  }
  .jumbotron h5 {
    margin-bottom: 0;
    font-size: .95rem;
  }
  .language-switcher {
    position: static;
    margin-top: .45rem;
  }
}