/*
 * University of Ghana brand layer for the SLiMS "default" OPAC theme
 * ------------------------------------------------------------------
 * Loaded after style.css (see parts/header.php). Delete the <link> to that
 * file in header.php to return to the stock SLiMS look.
 *
 * Palette taken from ug.edu.gh and the UG crest:
 *   UG navy  #153D6E    UG gold  #B99D64    tint  #F3F7FF
 * Typeface: Inter (bundled in assets/fonts/inter, SIL Open Font License)
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }

:root {
    --ug-navy: #153d6e;
    --ug-navy-dark: #0d2a4f;
    --ug-navy-deep: #0a2140;
    --ug-gold: #b99d64;
    --ug-gold-dark: #8f7543;   /* gold for text on white (AA for large text) */
    --ug-gold-light: #e9dcc0;
    --ug-tint: #f3f7ff;
    --ug-ink: #1e2a3a;
    --ug-muted: #5b6676;
    --ug-line: #dfe5ee;
    --ug-radius: 10px;
}

/* ---------- Base ---------------------------------------------------------- */

body {
    font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ug-ink);
    background: var(--ug-tint);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--ug-navy); font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--ug-navy); }
a:hover, a:focus { color: var(--ug-gold-dark); }

::selection { background: var(--ug-gold-light); color: var(--ug-navy-deep); }

:focus-visible { outline: 3px solid var(--ug-gold); outline-offset: 2px; }

/* Bootstrap primary -> UG navy */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--ug-navy);
    border-color: var(--ug-navy);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ug-navy-dark);
    border-color: var(--ug-navy-dark);
    color: #fff;
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(185, 157, 100, .5); }

.btn-outline-primary { color: var(--ug-navy); border-color: var(--ug-navy); }
.btn-outline-primary:hover { background: var(--ug-navy); border-color: var(--ug-navy); color: #fff; }

.btn-outline-secondary { color: var(--ug-navy); border-color: var(--ug-line); }
.btn-outline-secondary:hover { background: var(--ug-navy); border-color: var(--ug-navy); color: #fff; }

.text-primary { color: var(--ug-navy) !important; }
.bg-primary { background-color: var(--ug-navy) !important; }

.form-control:focus {
    border-color: var(--ug-gold);
    box-shadow: 0 0 0 .2rem rgba(185, 157, 100, .25);
}

.form-check-input { accent-color: var(--ug-navy); }

/* ---------- Header / hero ------------------------------------------------- */

.c-header {
    min-height: 420px;
    border-top: 4px solid var(--ug-gold);
    display: flex;
    flex-direction: column;
}

.c-header .mask {
    background:
        linear-gradient(100deg, rgba(10, 33, 64, .94) 0%, rgba(21, 61, 110, .86) 45%, rgba(21, 61, 110, .55) 100%);
}

.c-header .navbar { padding-top: .9rem; padding-bottom: .9rem; position: relative; z-index: 2; }

.c-header .navbar-brand h1 {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem !important;
    letter-spacing: .01em;
}
.c-header .navbar-brand h2 {
    color: var(--ug-gold-light);
    font-size: .8rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px !important;
}

/* crest sits on a white tile so it reads on navy */
.navbar-brand img {
    background: #fff;
    border-radius: 6px;
    padding: 3px;
    height: 44px !important;
    width: auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    font-size: .95rem;
    padding: .4rem .9rem !important;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; border-bottom-color: rgba(185, 157, 100, .6); }
.navbar-dark .navbar-nav .active > .nav-link { color: #fff; border-bottom-color: var(--ug-gold); }

.navbar-dark .navbar-toggler { border-color: rgba(185, 157, 100, .7); }

/* hero headline (markup in parts/_home.php) */
.ug-hero {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 2.5rem;
    padding-bottom: 4.5rem;
    color: #fff;
}
.ug-hero .ug-eyebrow {
    display: inline-block;
    color: var(--ug-gold-light);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .75rem;
    padding-left: .75rem;
    border-left: 3px solid var(--ug-gold);
}
.ug-hero .ug-title {
    color: #fff;
    padding-left: 1rem;
    border-left: 4px solid var(--ug-gold);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 .75rem;
    max-width: 16ch;
}
.ug-hero .ug-lead {
    color: rgba(255, 255, 255, .85);
    padding-left: calc(1rem + 4px);
    font-size: 1.05rem;
    max-width: 46ch;
    margin: 0;
}

/* search card overlapping the hero */
.search { margin-top: -38px; position: relative; z-index: 3; }
.search .card {
    border-radius: var(--ug-radius) !important;
    border-bottom: 3px solid var(--ug-gold) !important;
    box-shadow: 0 10px 30px rgba(10, 33, 64, .18), 0 2px 6px rgba(10, 33, 64, .08) !important;
    background-position: calc(100% - 22px) center;
    background-size: 26px;
}
.search .card-body { padding: 1.1rem 1.5rem; }
.search .input-transparent { color: var(--ug-ink); font-size: 1.2rem; padding-right: 48px; }
.search .input-transparent::placeholder { color: #8b95a5; font-weight: 400; font-size: .95rem; }

.advanced-wraper { border-radius: var(--ug-radius); border-top: 3px solid var(--ug-navy); }
.advanced-wraper .label { color: var(--ug-muted); font-weight: 600; font-size: .85rem; }

/* ---------- Home sections ------------------------------------------------- */

#slims-home > section > h4,
#slims-home h4.mb-4 {
    font-size: 1.6rem;
    font-weight: 700;
    position: relative;
    padding-bottom: .9rem;
}
#slims-home > section > h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--ug-gold);
    border-radius: 2px;
}
.subtitle-section {
    display: inline-block;
    margin-top: .35rem;
    font-size: .95rem;
    font-weight: 400;
    color: var(--ug-muted);
}

/* collection cards (Vue component) */
#slims-home .card,
.collection .card {
    border: 1px solid var(--ug-line) !important;
    border-radius: var(--ug-radius) !important;
    box-shadow: 0 1px 2px rgba(10, 33, 64, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    overflow: hidden;
}
#slims-home .card:hover {
    transform: translateY(-3px);
    border-color: var(--ug-gold) !important;
    box-shadow: 0 10px 22px rgba(10, 33, 64, .12);
}
#slims-home .card a { text-decoration: none; }
#slims-home .card .card-text,
#slims-home .card .title {
    color: var(--ug-ink);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
}
#slims-home .card:hover .card-text,
#slims-home .card:hover .title { color: var(--ug-navy); }

.card-image { border-radius: 6px; border-color: var(--ug-line); }

/* map / contact block */
#slims-home .row.align-items-center h4 { color: var(--ug-navy); }

/* social buttons follow the palette instead of four brand colours */
#slims-home .btn-primary,
#slims-home .btn-info,
#slims-home .btn-danger,
#slims-home .btn-dark {
    background: var(--ug-navy);
    border-color: var(--ug-navy);
    color: #fff;
}
#slims-home .btn-primary:hover,
#slims-home .btn-info:hover,
#slims-home .btn-danger:hover,
#slims-home .btn-dark:hover { background: var(--ug-gold); border-color: var(--ug-gold); color: var(--ug-navy-deep); }

/* ---------- Search results / detail -------------------------------------- */

/* examiner line under the title on the detail page */
.blockquote-footer { color: var(--ug-muted); font-size: .95rem; }
.blockquote-footer a { color: var(--ug-navy); font-weight: 600; }
.blockquote-footer a:hover { color: var(--ug-gold-dark); }

.result-search .card.item,
.card.item {
    border: 1px solid var(--ug-line) !important;
    border-left: 4px solid var(--ug-navy) !important;
    border-radius: var(--ug-radius);
    box-shadow: 0 1px 2px rgba(10, 33, 64, .05);
    transition: border-color .15s, box-shadow .15s;
}
.card.item:hover { border-left-color: var(--ug-gold) !important; box-shadow: 0 8px 20px rgba(10, 33, 64, .10); }

.card.item .card-link,
.card.item h5 a,
.card.item .title a { color: var(--ug-navy) !important; font-weight: 600; }
.card.item .card-link:hover { color: var(--ug-gold-dark) !important; }

/* keyword highlight: gold marker instead of red text */
.highlight {
    color: inherit !important;
    background: var(--ug-gold-light);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 var(--ug-gold);
}

/* SLiMS greys out covers with no physical copy; past papers rarely have one */
img.not-available { filter: none; }

/* detail page cover panel */
.bg-grey-light.p-12.rounded { background: #e3eaf4 !important; border-radius: var(--ug-radius) !important; }

.card.availability { border: 1px solid var(--ug-line); border-radius: 8px; }
.card.availability .value { color: var(--ug-navy); font-weight: 700; }
.card.availability .value.text-danger { color: #b3261e !important; }

/* filter sidebar */
.list-group-item.bg-transparent { border-color: var(--ug-line); }

/* range slider (ion.rangeSlider) */
.irs--round .irs-bar,
.irs--flat .irs-bar,
.irs-bar { background-color: var(--ug-navy) !important; }
.irs--round .irs-handle,
.irs-handle { border-color: var(--ug-navy) !important; }
.irs--flat .irs-handle > i:first-child { background-color: var(--ug-navy) !important; }
.irs-from, .irs-to, .irs-single { background-color: var(--ug-navy) !important; }
.irs-from::before, .irs-to::before, .irs-single::before { border-top-color: var(--ug-navy) !important; }

/* pagination */
.pagination .page-link { color: var(--ug-navy); border-color: var(--ug-line); }
.pagination .page-item.active .page-link { background: var(--ug-navy); border-color: var(--ug-navy); color: #fff; }

/* SLiMS's own pager */
.biblioPaging .pagingList b {
    background-color: var(--ug-navy);
    border-color: var(--ug-navy);
    box-shadow: 0 0 0 3px rgba(185, 157, 100, .45);
}
.biblioPaging .pagingList a:hover { color: var(--ug-gold-dark); }
.jsonResultLink, .xmlResultLink { color: var(--ug-navy); }

/* librarian and member login buttons */
#loginForm .loginButton,
.loginButton,
.page-member-area .memberButton {
    background-color: var(--ug-navy) !important;
    border-color: var(--ug-navy) !important;
    color: #fff !important;
    border-radius: 6px;
    font-weight: 600;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#loginForm .loginButton:hover,
.loginButton:hover,
.page-member-area .memberButton:hover {
    background-color: var(--ug-navy-dark) !important;
    border-color: var(--ug-navy-dark) !important;
}

/* modals */
.modal-header { background: var(--ug-navy); color: #fff; border-bottom: 3px solid var(--ug-gold); }
.modal-header .modal-title { color: #fff; }
.modal-header .close { color: #fff; opacity: .85; text-shadow: none; }

/* ---------- Footer -------------------------------------------------------- */

footer.bg-grey-darkest {
    background: var(--ug-navy-deep) !important;
    color: rgba(255, 255, 255, .78) !important;
    border-top: 4px solid var(--ug-gold);
    font-size: .95rem;
}
footer.bg-grey-darkest h4 {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}
footer.bg-grey-darkest h4::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: .6rem;
    background: var(--ug-gold);
}
footer.bg-grey-darkest p, footer.bg-grey-darkest .mb-2 { color: rgba(255, 255, 255, .78); line-height: 1.65; }
footer.bg-grey-darkest a, footer.bg-grey-darkest a.text-light { color: rgba(255, 255, 255, .88) !important; }
footer.bg-grey-darkest a:hover, footer.bg-grey-darkest a.text-light:hover { color: var(--ug-gold) !important; text-decoration: none; }
footer.bg-grey-darkest .list-reset li { margin-bottom: .35rem; }
footer.bg-grey-darkest .col-md-3 > img {
    background: #fff;
    border-radius: 6px;
    padding: 4px;
    height: 56px !important;
    width: auto !important;
    margin-bottom: .75rem;
}
footer.bg-grey-darkest .col-md-3 > .mb-4 { color: #fff; font-weight: 600; }

footer.bg-grey-darkest .form-control { border: 0; border-radius: 6px 0 0 6px; }
footer.bg-grey-darkest .btn-primary { background: var(--ug-gold); border-color: var(--ug-gold); color: var(--ug-navy-deep); font-weight: 600; }
footer.bg-grey-darkest .btn-primary:hover, footer.bg-grey-darkest .btn-primary:focus { background: #cbb386; border-color: #cbb386; color: var(--ug-navy-deep); }

footer.bg-grey-darkest .btn-outline-success,
footer.bg-grey-darkest .btn-outline-light {
    color: #fff !important;
    border-color: rgba(185, 157, 100, .7);
    border-radius: 6px;
    font-weight: 500;
}
footer.bg-grey-darkest .btn-outline-success:hover,
footer.bg-grey-darkest .btn-outline-light:hover {
    background: var(--ug-gold);
    border-color: var(--ug-gold);
    color: var(--ug-navy-deep) !important;
}
footer.bg-grey-darkest .btn-outline-success i, footer.bg-grey-darkest .btn-outline-light i { color: var(--ug-gold); }
footer.bg-grey-darkest .btn-outline-success:hover i, footer.bg-grey-darkest .btn-outline-light:hover i { color: var(--ug-navy-deep); }

footer.bg-grey-darkest hr { border-color: rgba(255, 255, 255, .12); }
footer.bg-grey-darkest .text-grey, footer.bg-grey-darkest .font-thin { color: rgba(255, 255, 255, .6) !important; }

/* ---------- Small screens ------------------------------------------------- */

/* keep the menu button beside the (long) site name until the menu expands */
@media (max-width: 991.98px) {
    .c-header .navbar-brand {
        max-width: calc(100% - 64px);
        margin-right: 0;
        white-space: normal;
    }
    .c-header .navbar-brand h1,
    .c-header .navbar-brand h2 { white-space: normal; }
    .c-header .navbar-brand h2 { letter-spacing: .04em; }
    .c-header .navbar-toggler { margin-left: auto; }
    .navbar-collapse.collapsing,
    .navbar-collapse.collapse.show {
        background-color: var(--ug-navy-dark) !important;
        border-top: 2px solid var(--ug-gold);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 24px rgba(10, 33, 64, .35);
    }
    .navbar-dark .navbar-nav .active > .nav-link { border-bottom-color: transparent; border-left: 3px solid var(--ug-gold); }
}

@media (max-width: 767.98px) {
    .c-header { min-height: 0; }
    .ug-hero { padding-top: 1.25rem; padding-bottom: 3.75rem; }
    .ug-hero .ug-title { font-size: 1.85rem; }
    .ug-hero .ug-lead { font-size: .95rem; }
    .navbar-brand img { height: 38px !important; }
    .c-header .navbar-brand h1 { font-size: 1rem !important; }
    .c-header .navbar-brand h2 { font-size: .68rem !important; }
    .navbar-collapse { background: var(--ug-navy-dark); margin: .5rem -1rem 0; padding: .5rem 1rem; border-top: 2px solid var(--ug-gold); }
    .search .input-transparent { font-size: 1rem; }
    #slims-home > section > h4 { font-size: 1.3rem; }
}