/* Sheet-music theme — visual replica of accordion.org.ua (accordion-2022).
   Ported from that site's templates/accordion-2022/assets/style.css with
   the header image path repointed at this theme's own assets folder. */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

h1 {
    font-weight: 700;
}

/* Breathing room between a page title and its body copy. */
.page > h1 {
    margin-bottom: 1.5rem;
}

/* Stand-in shown in the biography modal when an author has no photo. */
.author-photo-missing {
    max-width: 22rem;
    padding: 2rem 1.5rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.author-photo-missing a {
    text-decoration: underline;
}

main {
    background: #fff;
}

/* Language switcher strip — its own thin bar above the hero (never inside
   the letters/authors nav below it), riding on .bg-black like everything
   else in this theme's chrome so it stays legible over any header image. */
.lang-utility { font-size: .8rem; padding: .3rem 0; }
.lang-utility .btn-link { padding: 0; text-transform: uppercase; letter-spacing: .04em; }
.lang-utility .btn-link:hover,
.lang-utility .btn-link:focus { color: #fff; }
.lang-utility .dropdown-item.active,
.lang-utility .dropdown-item.active:hover,
.lang-utility .dropdown-item.active:focus { background: none; color: #000; font-weight: 700; }

.header-background {
    background-image: url('/themes/sheet-music/assets/header-default.webp');
    background-size: cover;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    text-align: center;
}

/* The header plate, nav bar and footer all ride on .bg-black. Colour and
   (for the name plate only) opacity are driven by CSS vars the theme
   settings screen fills in — --bs-black-rgb defaults to #1D1D1D, opacity
   to fully opaque. */
.bg-black {
    background-color: rgba(var(--bs-black-rgb, 29, 29, 29), var(--bs-bg-opacity, 1));
}

/* Text-selection colour follows the theme's accent (--bs-primary); a
   lighter tint on the dark header/nav/footer keeps it readable there. */
::selection {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), .25);
    color: #1f1f1f;
}

.bg-black ::selection {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.sitename {
    display: inline-block;
    padding: 20px 40px;
}

@media (min-width: 992px) {
    .sitename {
        margin: 120px auto;
    }
}

@media (max-width: 991px) {
    .sitename {
        margin: 40px auto;
    }
}

.sitename a {
    font-size: 1.75em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 4px;
    font-weight: 700;
    color: #fff;
}

.sitename a:hover {
    text-decoration: none;
    color: #007bff;
}

.sitename hr {
    border: 1px;
    border-top: 1px solid rgba(255, 255, 255, .5);
}

.sidebar h3,
.footer h3 {
    text-transform: uppercase;
    font-weight: 700;
}

.frontmenu .dropdown-toggle::after {
    border: none;
    content: none;
}

.frontmenu > li {
    margin-right: 2em;
}

@media (min-width: 992px) {
    .frontmenu > li:after {
        content: '/';
        color: #6c757d;
        position: absolute;
        margin-left: 40px;
        margin-top: -32px;
    }

    .frontmenu > li:last-child:after {
        content: none;
    }
}

.blockquote {
    font-size: 0.9rem;
    border-left: 3px solid;
    margin-left: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#toTop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
    color: #212529;
    text-shadow: 0 0 2px #fff;
    z-index: 1030;
}

#accept_cookies {
    z-index: 1000;
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
}

.accept_cookies #accept_cookies {
    display: none;
}

a:has(i) {
    text-decoration: none;
}

.compositions-list {
    counter-reset: item;
}

.compositions-list .composition {
    counter-increment: item;
}

.compositions-list .composition-number::before {
    content: counter(item) ".";
}

.collections-list {
    counter-reset: item;
}

.collections-list .collection {
    counter-increment: item;
}

.collection-number::before {
    content: counter(item) ".";
}

/* The right-column widget area (Sidebars::render) reuses the theme's own
   3rem section spacing between blocks. */
.sidebar .widget {
    margin-bottom: 3rem;
}

.sidebar .widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .5rem;
}

/* A touch of breathing room inside the categories/folk nav list. */
.compositions-sidebar-nav .list-group-item {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.compositions-sidebar-nav .dropdown-menu {
    font-size: .95rem;
}

/* The cookie blurb and the footer "Увага!" body are rich text (TinyMCE),
   so they arrive wrapped in <p>. Kill the trailing margin so the banner
   and footer columns stay tight. */
#accept_cookies .cookie-text > :last-child,
.footer .row > div > :last-child {
    margin-bottom: 0;
}

.sm-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }
.sm-icon-3x { width: 3em; height: 3em; }