/* Lyrics Library browsing pages: the index, a category, search results and
   the full category tree (index.php, search.php, treeView.php; markup from
   library_functions.php). The warm palette and faces of the hymn pages:
   Crimson Pro for names, the Coptic face for Coptic, a Naskh for Arabic. */

.lib-en, .lib-name, .lib-lede, .lib-list a { font-family: "Crimson Pro", Georgia, "Times New Roman", serif; }
.lib-ar { font-family: "Noto Naskh Arabic", Tahoma, serif; direction: rtl; unicode-bidi: embed; color: #6a5a30; }

/* The menu row above every library page */
.lib-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 6px; }
.lib-menu .nav-pills { margin-right: auto; }
.lib-menu .nav-pills > li > a { color: #905416; padding: 8px 12px; }
.lib-menu .nav-pills > li > a:hover, .lib-menu .nav-pills > li > a:focus { background: #fff6d8; color: #562300; }
.lib-menu .nav-pills > li.lib-here { padding: 8px 12px; color: #562300; font-weight: bold; }
.lib-menu-search { display: flex; align-items: center; gap: 10px; }
.lib-menu-search .lib-q input { height: 34px; font-size: 14px; width: 220px; }
.lib-menu-search .lib-q button { height: 34px; padding: 0 12px; }

/* Search box: an input and its button joined into one pill */
.lib-q { display: flex; }
.lib-q input {
    flex: 1 1 auto; min-width: 0; height: 44px; font-size: 17px; padding: 4px 16px;
    border: 1px solid #dccb95; border-right: 0; border-radius: 22px 0 0 22px; background: #fffdf6;
}
.lib-q input:focus { outline: 2px solid #c28a00; outline-offset: -2px; }
.lib-q button {
    height: 44px; padding: 0 18px; border: 0; border-radius: 0 22px 22px 0;
    background: #c28a00; color: #fff; font-size: 15px;
}
.lib-q button:hover, .lib-q button:focus { background: #a87700; }
.lib-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 680px; }
.lib-search .lib-q { flex: 1 1 320px; }

/* Index */
.lib-hero { padding: 6px 0 18px; border-bottom: 1px solid #ead9a4; margin-bottom: 8px; }
.lib-hero h1 { margin: 6px 0 2px; }
.lib-lede { color: #8a7a55; font-size: 1.25em; margin: 0 0 14px; }
.lib-section h2 { font-size: 20px; color: #562300; margin: 26px 0 10px; }
.lib-section h2 small { color: #8a7a55; font-size: 14px; margin-left: 8px; }
.lib-section h2 a.lib-all { float: right; font-size: 14px; font-weight: normal; margin-top: 4px; }
.lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.lib-card { background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; padding: 14px 16px 12px; }
.lib-card h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lib-card h3 a { color: #562300; }
.lib-card h3 .lib-ar { font-size: .9em; }
.lib-count { color: #8a7a55; font-size: 13px; white-space: nowrap; font-weight: normal; }
.lib-card ul { list-style: none; padding: 0; margin: 0; }
.lib-card li { padding: 3px 0; line-height: 1.35; }
.lib-card li a { color: #905416; }
.lib-card a.lib-more { color: #8a7a55; font-size: 13px; }
.lib-letters { margin: 0; line-height: 2; }
.lib-letters a { display: inline-block; min-width: 26px; text-align: center; color: #905416; border-radius: 4px; }
.lib-letters a:hover { background: #fff6d8; text-decoration: none; }
.lib-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.lib-list { list-style: none; padding: 0; margin: 0; }
.lib-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1e9d2; }
.lib-list a { font-size: 1.15em; color: #222; }
.lib-list a:hover { color: #905416; }
.lib-list .lib-coptic { font-size: 1em; color: #666; }
.lib-list .lib-meta { color: #8a7a55; font-size: 12px; white-space: nowrap; }
.lib-lessons li a { color: #222; }
.lib-lessons .fa { color: #c28a00; margin-right: 6px; }

/* A category page */
.lib-crumbs { margin: 8px 0 12px; }
.lib-crumbs .lib-sep { color: #b58900; margin: 0 2px; }
.lib-title { margin: 4px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.lib-title .lib-ar { font-size: .8em; }
.lib-title .lib-count { font-size: 15px; }
.lib-sub { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 14px; }
.lib-sub li a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-height: 44px;
    padding: 9px 14px; background: #fffdf6; border: 1px solid #ead9a4; border-radius: 6px; color: #562300;
}
.lib-sub li a:hover, .lib-sub li a:focus { background: #fff6d8; text-decoration: none; }
.lib-sub .lib-ar { font-size: .95em; }
.lib-sub .lib-count { margin-left: auto; }

/* Hymn lists (a category, search results) */
.lib-hymns { list-style: none; padding: 0; margin: 0 0 16px; }
.lib-hymns li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 10px 8px; border-bottom: 1px solid #f1e9d2; }
.lib-hymns li:hover { background: #fbf7ea; }
.lib-hymns .lib-name { font-size: 1.25em; color: #222; }
.lib-hymns .lib-name:hover { color: #905416; }
.lib-hymns .lib-coptic { font-size: 1.2em; color: #444; }
.lib-hymns .lib-lesson { color: #c28a00; }
.lib-hymns .lib-ar { margin-left: auto; font-size: 1.15em; }
.lib-hymns .lib-admin { white-space: nowrap; }
.lib-hymns .lib-admin a { color: #8a7a55; padding: 4px 7px; }
.lib-hymns .lib-admin a:hover { color: #a94442; }
.lib-group { margin: 22px 0 4px; font-size: 14px; color: #8a7a55; }
.lib-group a { color: #905416; }
.lib-note { color: #8a7a55; margin: 4px 0 12px; }

/* The full tree (treeView.php) */
.lib-tree ul { list-style: none; padding-left: 20px; margin: 0; }
.lib-tree > ul { padding-left: 0; }
.lib-tree li { padding: 3px 0; }
.lib-tree > ul > li { margin: 14px 0 6px; }
.lib-tree > ul > li > a { font-size: 19px; color: #562300; }
.lib-tree a { color: #905416; }
.lib-tree .lib-count { margin-left: 6px; }

@media (max-width: 600px) {
    .lib-menu .nav-pills > li > a { padding: 8px 9px; }
    .lib-menu-search { width: 100%; }
    .lib-menu-search .lib-q { flex: 1; }
    .lib-menu-search .lib-q input { width: auto; flex: 1; }
    .lib-hymns .lib-name { font-size: 1.15em; }
    .lib-hymns .lib-ar { margin-left: 0; flex-basis: 100%; }
    .lib-section h2 a.lib-all { float: none; display: block; margin: 2px 0 0; }
}

/* Linking a recording to its hymn text (media/media_identify.php) */
.idf-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 14px 18px; margin: 10px 0 16px; background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; }
.idf-rec .idf-title { font-family: "Crimson Pro", Georgia, serif; font-size: 1.4em; color: #222; margin: 0; }
.idf-rec .idf-meta { color: #8a7a55; }
.idf-rec audio { height: 36px; max-width: 100%; }
.idf-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; padding: 10px 14px; border-left: 4px solid #c28a00; background: #fff6d8; border-radius: 3px; }
.idf-status.idf-none { border-left-color: #dccb95; background: #fbf7ea; color: #6a5a30; }
.idf-status.idf-broken { border-left-color: #a94442; background: #fbeeed; }
.idf-hymns { margin-bottom: 20px; }
.idf-hymns li { padding: 8px 8px; }
.idf-hymns .idf-trail { flex-basis: 100%; font-size: 12px; color: #8a7a55; }
.idf-hymns .idf-why { color: #8a7a55; font-size: 13px; }
.idf-hymns .idf-act { margin-left: auto; white-space: nowrap; }
.idf-hymns .idf-act a { margin-left: 6px; }
.idf-browse { margin-top: 8px; }
.idf-browse .lib-tree { display: none; margin-top: 8px; }
.idf-browse.open .lib-tree { display: block; }
.idf-result { padding: 16px 18px; margin: 12px 0 20px; background: #fffdf6; border: 1px solid #ead9a4; border-radius: 8px; }
.idf-result.idf-error { border-color: #d9a3a0; background: #fbeeed; }
.idf-result .fa-check { color: #3c763d; }
.idf-result code { color: #562300; background: #fff6d8; }