/* ==========================================================
   STRANGELOVE COLLECTION GUEST – CUSTOM CSS
   VERSION: v15 (8 Oct 2026)
   Raise the number whenever this file changes (v16, v17, ...) and save it
   as strangelove-guest-custom-vNN.css, so the newest version is always clear.
   v15: links in the metadata values on item pages (Subject etc.) are blue
        again (new section 23, colours in section 1).
   v14: Strangelove number under item titles (21), single selection page (22).
   Purpose: Styling for the guest site (Omeka S custom CSS field).
   Browse and search cards use a light warm grey that stands out from
   the warm page background; thumbnails sit in a slightly darker grey
   square box with a solid mid grey border. Links carry no underline (only on
   hover), the page background has a faint warm tone, and the header
   is a quiet centred one-line menu (no big wordmark, no circle).
   1. Colours
   2. "Add to selection" button
   3. "My selections" page
   4. Header search
   5. Browse Preview block (square image boxes in cards)
   6. Inline image viewer (lightGallery), neutral light gray set
   7. Search results page (cards with square image boxes)
   8. Full-page view of the image viewer, same neutral light gray
   9. Links: no underline, underline on hover only
   10. Page background: faint warm tone
   11. Header: centred one-line menu, current page in sepia
   12. User bar (signed-in line) in quiet grey
   13. Search page: no dotted outlines, grey slider
   14. Search results, list view: same grey cards as the grid view
   15. Hierarchy result pages (click on a topic): same grey cards
   16. Hide the Prev / Next page buttons at the bottom of pages
   17. Inputs, dropdowns, buttons and the filter tag: one look
   18. Footer: one quiet line, no colours
   19. "User selections" list: grey cards with thumbnail
   20. References page: alphabet buttons as small grey tiles
   21. Strangelove number under item titles (block template "With identifier")
   22. Single selection page (e.g. "Favorites"): same grey cards
   23. Links in the metadata values (Subject etc.): blue
   ========================================================== */


/* ----------------------------------------------------------
   1. COLOURS – change them here only
   ---------------------------------------------------------- */
:root {
  --sel-text:   #565656;  /* button text */
  --sel-border: #707070;  /* button border */
  --sel-accent: #333333;  /* hover and keyboard focus (dark grey) */
  --sel-heart:  #e0245e;  /* filled heart once an item is selected */
  --link-color: #2a5d8f;  /* links in metadata values (Subject etc.): blue */
  --link-hover: #163a5e;  /* the same links on hover and keyboard focus */
}


/* ----------------------------------------------------------
   2. "ADD TO SELECTION" BUTTON
   Outlined button: text on the left, large heart on the right.
   ---------------------------------------------------------- */

/* Normal state */
.selection-button.selection-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  width: auto !important;
  height: auto !important;
  margin: 0 0 1.25rem 0;
  padding: 10px 18px !important;
  background: transparent !important;
  border: 1px solid var(--sel-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: var(--sel-text) !important;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Remove the bookmark icon */
.selection-button.selection-toggle .selection-icon {
  display: none !important;
}

/* Label on the left */
.selection-button.selection-toggle::before {
  content: "Add to selection" !important;
  margin: 0;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}

/* Heart on the right: outline, drawn as a mask so it follows the text colour */
.selection-button.selection-toggle::after {
  content: "" !important;
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover and keyboard focus */
.selection-button.selection-toggle:hover {
  border-color: var(--sel-accent) !important;
  color: var(--sel-accent) !important;
}
.selection-button.selection-toggle:focus-visible {
  outline: 2px solid var(--sel-accent);
  outline-offset: 2px;
}

/* SELECTED state: new label, filled heart in the heart colour */
.selection-button.selection-toggle.selected::before,
.selection-button.selection-toggle.active::before,
.selection-button.selection-toggle.is-selected::before,
.selection-button.selection-toggle[aria-pressed="true"]::before {
  content: "In selection" !important;
}
.selection-button.selection-toggle.selected::after,
.selection-button.selection-toggle.active::after,
.selection-button.selection-toggle.is-selected::after,
.selection-button.selection-toggle[aria-pressed="true"]::after {
  background-color: var(--sel-heart);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ----------------------------------------------------------
   3. "MY SELECTIONS" PAGE
   ---------------------------------------------------------- */

/* Each selection = one framed section */
.selection-list > li.selection {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 2.5rem;
  background: #fafafa;
  list-style: none;
}

/* Selection title: no cover image, large heading */
.selection-list > li.selection > a.resource-link img {
  display: none;
}
.selection-list > li.selection > a.resource-link {
  text-decoration: none;
}
.selection-list > li.selection > a.resource-link .resource-name {
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
}

/* Hide the duplicate count inside the list */
.selection-list > li.selection .selection-count {
  display: none;
}

/* Images inside a selection as a grid */
.selection-list li.selection .selection-resources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.selection-list li.selection .selection-resource {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 0.6rem;
}
.selection-list li.selection .selection-resource img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f0f0f0;
}
.selection-list li.selection .selection-resource .resource-name {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.selection-list li.selection .selection-resource .description {
  display: none;
}


/* ----------------------------------------------------------
   4. HEADER SEARCH
   Hide the theme's built-in search box (magnifying glass + form),
   and the advanced search link in the top bar.
   It is hardcoded to Omeka's plain core search and ignores our
   configured Advanced Search page.
   ---------------------------------------------------------- */
.main-header-search,
.main-search-button,
.top-bar__advanced-search {
  display: none !important;
}


/* ==========================================================================
   5. Browse Preview block (resource-grid): uniform square image boxes in cards
   Purpose: Every image sits in an identical square box (grey, solid mid
   grey border, inner padding) and is shown completely, not cropped. Each
   card has square corners, a light warm grey background (darker than the
   page, lighter than the image box, so both still stand out), and equal space above and below the
   image box. The title stays visible to the right. Masonry positioning is
   replaced by a plain two-column CSS grid.
   To change the box size: --thumb-size. Box gray: --thumb-bg. Box border:
   --thumb-border. Space around the image inside the box: --thumb-padding.
   Card color: --card-bg. Space between card edge and image box:
   --card-padding.
   ========================================================================== */

.resource-grid {
    --thumb-size: 140px;
    --thumb-bg: #dcdad6;
    --thumb-border: 1px solid #999999;
    --thumb-padding: 8px;
    --card-bg: #ecebe8;
    --card-padding: 15px;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.resource-grid .grid-sizer,
.resource-grid .gutter-sizer {
    display: none !important;
}

.resource-grid .resource {
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--card-padding) !important;
    box-sizing: border-box;
    background: var(--card-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

.resource-grid .resource::before,
.resource-grid .resource::after {
    border-radius: 0 !important;
}

.resource-grid .resource .resource__thumbnail {
    flex: 0 0 var(--thumb-size);
    width: var(--thumb-size);
    height: var(--thumb-size);
    margin: 0 !important;
    top: auto !important;
    background: var(--thumb-bg);
    border: var(--thumb-border);
    box-sizing: border-box;
    padding: var(--thumb-padding);
    overflow: hidden;
}

.resource-grid .resource .resource__thumbnail a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.resource-grid .resource .resource__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: contain !important;
}

.resource-grid .resource .resource__content {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}


/* ==========================================================================
   6. Inline image viewer (lightGallery) on item pages: neutral light gray set
   Purpose: The viewer on the item page was black. This gives the whole set
   (top toolbar, photo area, arrows, counter, thumbnail strip with the
   recto/verso thumbnails, caption) one single neutral very light gray
   background (no colour cast, so it works with every photo), with dark gray
   icons. A thin gray line is drawn around the whole viewer. All rules are
   limited to #itemfiles, so nothing else on the site changes. The full-page
   view uses the same gray (section 8).
   To change the background: --lg-bg (strip: --lg-strip). Outer line color:
   --lg-box-line (set it to transparent for no line around the viewer).
   Thumbnail outline: --lg-line. Icon color: --lg-icon.
   ========================================================================== */

#itemfiles {
    --lg-bg: #f5f5f5;
    --lg-strip: #f5f5f5;
    --lg-box-line: #bbbbbb;
    --lg-line: #bbbbbb;
    --lg-icon: #555555;
}

/* Main layers */
#itemfiles .lg-container,
#itemfiles .lg-backdrop,
#itemfiles .lg-outer,
#itemfiles .lg-content,
#itemfiles .lg-inner,
#itemfiles .lg-item,
#itemfiles .lg-img-wrap {
    background: var(--lg-bg) !important;
    background-color: var(--lg-bg) !important;
}

/* Thin line around the whole viewer, drawn on top of all layers */
#itemfiles .lg-outer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid var(--lg-box-line);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2000;
}

/* Top toolbar and counter */
#itemfiles .lg-toolbar {
    background: var(--lg-bg) !important;
    background-color: var(--lg-bg) !important;
}

#itemfiles .lg-toolbar .lg-icon,
#itemfiles .lg-counter,
#itemfiles .lg-prev,
#itemfiles .lg-next {
    color: var(--lg-icon) !important;
}

#itemfiles .lg-toolbar .lg-icon:hover,
#itemfiles .lg-prev:hover,
#itemfiles .lg-next:hover {
    color: #000000 !important;
}

#itemfiles .lg-prev,
#itemfiles .lg-next {
    background: var(--lg-bg) !important;
}

/* Thumbnail strip at the bottom (recto / verso): same color as the rest */
#itemfiles .lg-components,
#itemfiles .lg-thumb-outer,
#itemfiles .lg-thumb,
#itemfiles .lg-thumb-group {
    background: var(--lg-strip) !important;
    background-color: var(--lg-strip) !important;
}

#itemfiles .lg-thumb-item {
    border: 1px solid var(--lg-line) !important;
}

#itemfiles .lg-thumb-item.active,
#itemfiles .lg-thumb-item:hover {
    border-color: #333333 !important;
}

/* Caption bar, if present */
#itemfiles .lg-sub-html,
#itemfiles .lg-sub-html h4,
#itemfiles .lg-sub-html p {
    background: var(--lg-bg) !important;
    color: #333333 !important;
}


/* ==========================================================================
   7. Search results page: cards with square image boxes
   Purpose: Same look as the browse preview. Each result card gets a light
   warm grey background and square corners (instead of the theme's rounded
   corner). The image sits in an identical square box (grey, solid mid
   grey border, inner padding) and is shown completely, not cropped. Title stays
   on top and always takes the space of two lines (longer titles are cut
   off with ...), so all images start at the same height. The "Add to
   selection" button is centered at the bottom of the card, so all buttons
   in a row line up. The cards are laid out in a plain CSS grid.
   To change the box gray: --thumb-bg. Box border: --thumb-border. Space
   around the image inside the box: --thumb-padding. Card color: --card-bg.
   Space between card edge and content: --card-padding. Minimum card width (more or fewer cards per
   row): --card-min.
   ========================================================================== */

.search-results .resource-list.grid {
    --card-bg: #ecebe8;
    --card-padding: 15px;
    --thumb-bg: #dcdad6;
    --thumb-border: 1px solid #999999;
    --thumb-padding: 8px;
    --card-min: 240px;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
    gap: 20px;
    align-items: stretch;
}

.search-results .resource-list.grid .resource {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    row-gap: 10px;
    padding: var(--card-padding) !important;
    box-sizing: border-box;
    background: var(--card-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

.search-results .resource-list.grid .resource a:has(> img) {
    display: block;
    width: 100%;
}

.search-results .resource-list.grid .resource img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    background: var(--thumb-bg);
    border: var(--thumb-border);
    padding: var(--thumb-padding);
    box-sizing: border-box;
}

/* Title (first element of the card): always reserves two lines, so all
   images start at the same height. Longer titles are cut off with "...".
   To allow more lines: change --title-lines. */
.search-results .resource-list.grid .resource > :first-child {
    --title-lines: 2;
    line-height: 1.35;
    min-height: calc(var(--title-lines) * 1.35em);
    min-height: calc(var(--title-lines) * 1lh);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--title-lines);
    line-clamp: var(--title-lines);
    overflow: hidden;
}

/* Button (last element of the card): centered, at the bottom, no extra space */
.search-results .resource-list.grid .resource > :last-child {
    margin-top: auto !important;
    text-align: center;
}

.search-results .resource-list.grid .resource .selection-button.selection-toggle {
    margin-bottom: 0 !important;
    align-self: center;
}


/* ==========================================================================
   8. Full-page view of the image viewer (lightGallery): same neutral gray
   Purpose: When the viewer is opened full page (browser full-screen from the
   viewer button, or the viewer opened as an overlay on top of the page), the
   whole set (toolbar, photo area, arrows, counter, thumbnail strip, caption)
   gets the same neutral very light gray as the normal viewer in section 6.
   Icons stay dark gray.
   To change the gray: replace #f5f5f5 here and --lg-bg / --lg-strip in
   section 6. Icon color: #555555. Thumbnail outline: #bbbbbb.
   ========================================================================== */

/* Colour variables, only in full-page mode */
#itemfiles:fullscreen,
#itemfiles :fullscreen,
.lg-container:not(.lg-inline) {
    --lg-bg: #f5f5f5;
    --lg-strip: #f5f5f5;
    --lg-line: #bbbbbb;
    --lg-icon: #555555;
}

/* Layers: the full-page element itself and everything inside it */
:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)),
:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) :is(
    .lg-container,
    .lg-backdrop,
    .lg-outer,
    .lg-content,
    .lg-inner,
    .lg-item,
    .lg-img-wrap,
    .lg-toolbar,
    .lg-prev,
    .lg-next,
    .lg-components,
    .lg-thumb-outer,
    .lg-thumb,
    .lg-thumb-group,
    .lg-sub-html
) {
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
}

/* Icons, counter, arrows */
:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) :is(
    .lg-toolbar .lg-icon,
    .lg-counter,
    .lg-prev,
    .lg-next
) {
    color: #555555 !important;
}

:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) :is(
    .lg-toolbar .lg-icon:hover,
    .lg-prev:hover,
    .lg-next:hover
) {
    color: #000000 !important;
}

/* Caption text */
:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) .lg-sub-html {
    color: #333333 !important;
}

/* Thumbnails (recto / verso) in full-page view */
:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) .lg-thumb-item {
    border: 1px solid #bbbbbb !important;
}

:is(#itemfiles:fullscreen, #itemfiles :fullscreen, .lg-container:not(.lg-inline)) :is(
    .lg-thumb-item.active,
    .lg-thumb-item:hover
) {
    border-color: #333333 !important;
}


/* ==========================================================================
   9. Links: no underline, underline on hover only
   Purpose: Links (item titles in browse and search cards, links in
   descriptions, menu links) are shown without underline, so the pages look
   calmer and closer to the main site. The underline appears when the mouse
   is over a link or when it has keyboard focus, so links stay recognisable.
   The COLOUR of the links in the metadata values (Subject etc.) is set in
   section 23. The "Add to selection" button is left alone.
   To keep links underlined on hover: no change. To remove the hover
   underline as well: change "underline" to "none" in the second rule.
   ========================================================================== */

a:not(.selection-toggle),
.resource-name a,
.resource-grid .resource a,
.search-results .resource-list.grid .resource a {
    text-decoration: none !important;
    border-bottom: none !important;
}

a:not(.selection-toggle):hover,
a:not(.selection-toggle):focus-visible,
.resource-name a:hover,
.resource-grid .resource a:hover,
.search-results .resource-list.grid .resource a:hover {
    text-decoration: underline !important;
}


/* ==========================================================================
   10. Page background: faint warm tone
   Purpose: Replaces the pure white page background with a very light warm
   off-white (a hint of paper), closer to the main site. Header, main
   content and footer get the same tone, so no white bands remain. Cards,
   thumbnail boxes and the image viewer keep their own greys.
   To change the tone: --page-bg. Warmer: e.g. #f8f4ec. Cooler: #fafaf8.
   Back to white: #ffffff.
   ========================================================================== */

:root {
    --page-bg: #faf8f4;
}

body,
header,
main,
footer {
    background-color: var(--page-bg) !important;
}


/* ==========================================================================
   11. Header: centred one-line menu, current page in sepia
   Purpose: Replaces the large "Strangelove Collection Guest" wordmark and the
   heavy circle on the current page with a quiet menu like the main site:
   one centred line, small capital letters, wide letter-spacing, dark grey.
   The current page is shown in sepia with a thin underline. Desktop only
   (from 1200 px wide); on phones the theme's own menu button stays as it
   is. The empty coloured band above the menu is hidden.
   The wordmark is hidden in the first rule: delete that rule if you want it
   back (add a "STRANGELOVE" link to the main site in the menu first, so
   visitors still have a way home and back).
   To change the colours: #555555 (menu) and #7a6444 (current page).
   Letter-spacing: 0.16em. Text size: 13px.
   ========================================================================== */

.main-header__top-bar {
    display: none !important;
}

@media (min-width: 1200px) {

    .main-header__site-title {
        display: none !important;
    }

    .main-header__main-bar {
        justify-content: center !important;
    }

    .main-navigation,
    .main-navigation__container {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .main-navigation .navigation {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        align-items: center;
        gap: 2.2rem;
        margin: 0;
        padding: 0;
    }

    .main-navigation .navigation li,
    .main-navigation .navigation li.active {
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .main-navigation .navigation li a {
        display: inline-block;
        padding: 0.35rem 0 !important;
        border: none !important;
        border-bottom: 1px solid transparent !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        font-size: 13px;
        font-weight: 400 !important;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        white-space: nowrap;
        color: #555555 !important;
    }

    .main-navigation .navigation li a:hover {
        color: #000000 !important;
        text-decoration: none !important;
    }

    /* Current page: sepia with a thin line (no circle) */
    .main-navigation .navigation li.active a,
    .main-navigation .navigation li a[aria-current="page"] {
        color: #7a6444 !important;
        border-bottom-color: #7a6444 !important;
    }

    .main-navigation .navigation li::before,
    .main-navigation .navigation li::after,
    .main-navigation .navigation li a::before,
    .main-navigation .navigation li a::after {
        display: none !important;
    }
}


/* ==========================================================================
   12. User bar (signed-in line) in quiet grey
   Purpose: Omeka's user bar ("Signed in as ... / Logout") was a dark blue
   strip. It now becomes a slim light grey line with small dark grey text, so
   it can also be shown to registered guests (it then tells them who is
   signed in and offers "Logout"). Admin links, if present, use the same style.
   The Logout/Login link is an outlined button, readable on the light bar.
   To change the colours: #ecebe8 (background), #555555 (text).
   ========================================================================== */

#user-bar {
    background: #ecebe8 !important;
    color: #555555 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #dcdad6 !important;
}

#user-bar a,
#user-bar span {
    color: #555555 !important;
    text-decoration: none !important;
}

#user-bar a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* The Logout / Login link: the theme gives it a dark button (#222933).
   Here it becomes a small outlined button with dark grey text. */
#user-bar .logout,
#user-bar .login,
#user-bar .user-links .logout {
    background: transparent !important;
    border: 1px solid #999999 !important;
    border-radius: 3px !important;
    color: #333333 !important;
    padding: 2px 10px !important;
    margin-top: 0 !important;
    margin-left: 12px !important;
    text-decoration: none !important;
}

#user-bar .logout:hover,
#user-bar .login:hover {
    background: #ffffff !important;
    border-color: #555555 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

#user-bar,
#user-bar .user-links,
#user-bar .site-links {
    align-items: center;
}


/* ==========================================================================
   13. Search page: no dotted outlines, grey slider
   Purpose: Removes the dotted frames around the "Search" and "Date range"
   boxes of the search form, and turns the bright blue date slider into dark
   grey (the browser default blue is replaced by the accent colour).
   To change the slider grey: #555555 in this section.
   ========================================================================== */

#content form .field,
#content form fieldset,
.search-form .field,
.search-form fieldset {
    border: none !important;
    outline: none !important;
}

input[type="range"],
input[type="checkbox"],
input[type="radio"] {
    accent-color: #555555;
}

.ui-slider-range,
.noUi-connect,
.range-slider .range,
.slider-range {
    background: #555555 !important;
}


/* ==========================================================================
   14. Search results, list view: same grey cards as the grid view
   Purpose: In list view the results were white boxes with a dotted border,
   no padding and a tiny thumbnail at the right edge. They now look like the
   browse and grid cards: a light warm grey card with real padding and square
   corners, the thumbnail on the LEFT in the same grey square box with a thin
   mid grey border (140 px), and title, description and the "Add to
   selection" button stacked beside it. The date slider line (blue) is also
   turned dark grey here.
   For cards without a background (only the thumbnail boxes), set --card-bg to
   transparent. To change the thumbnail size: --thumb-size.
   Card color: --card-bg. Thumbnail box: --thumb-bg, --thumb-border.
   ========================================================================== */

.search-results .resource-list:not(.grid) {
    --card-bg: #ecebe8;
    --card-padding: 15px;
    --thumb-size: 140px;
    --thumb-bg: #dcdad6;
    --thumb-border: 1px solid #999999;
    --thumb-padding: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-results .resource-list:not(.grid) > .resource {
    display: grid !important;
    grid-template-columns: var(--thumb-size) minmax(0, 1fr);
    grid-template-areas:
        "thumb heading"
        "thumb body"
        "thumb button";
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    row-gap: 10px;
    align-items: start;
    margin: 0 0 20px 0 !important;
    padding: var(--card-padding) !important;
    box-sizing: border-box;
    background: var(--card-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

.search-results .resource-list:not(.grid) > .resource > .resource-heading {
    grid-area: heading;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700;
}

.search-results .resource-list:not(.grid) > .resource > .resource-thumbnail {
    grid-area: thumb;
    float: none !important;
    position: static !important;
    width: var(--thumb-size) !important;
    height: var(--thumb-size) !important;
    margin: 0 !important;
    padding: var(--thumb-padding) !important;
    box-sizing: border-box;
    background: var(--thumb-bg);
    border: var(--thumb-border);
    overflow: hidden;
}

.search-results .resource-list:not(.grid) > .resource > .resource-thumbnail a,
.search-results .resource-list:not(.grid) > .resource > .resource-thumbnail .image-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.search-results .resource-list:not(.grid) > .resource > .resource-thumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
}

.search-results .resource-list:not(.grid) > .resource > .resource-body {
    grid-area: body;
    margin: 0 !important;
    padding: 0 !important;
}

.search-results .resource-list:not(.grid) > .resource > .selection-button {
    grid-area: button;
    justify-self: start;
    align-self: end;
    margin: 0 !important;
}

/* Date slider: the blue progress line becomes dark grey */
.range-double .range-progress,
.range-sliders .range-progress {
    background: #555555 !important;
}

/* On narrow screens the thumbnail goes above the text */
@media (max-width: 640px) {
    .search-results .resource-list:not(.grid) > .resource {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "thumb"
            "heading"
            "body"
            "button";
    }
}


/* ==========================================================================
   15. Hierarchy result pages (click on a topic): same grey cards
   Purpose: The pages that open when a topic is clicked in the Hierarchy tree
   (e.g. Nevada, Oak Ridge) showed white cards with rounded corners and a
   tiny thumbnail on the right. They now match the browse and search pages:
   a light warm grey card with square corners and real padding, the
   thumbnail on the left in the same grey square box with a thin mid grey
   border (140 px), and title and description beside it. The "Advanced
   search" link on these pages (it leads to a form without the date range)
   is hidden; the Search page in the menu does that job.
   To bring the link back: delete the last rule in this section.
   Card color: --card-bg. Thumbnail box: --thumb-bg, --thumb-border,
   --thumb-size.
   ========================================================================== */

.hierarchy-module .hierarchy-items .resource-list {
    --card-bg: #ecebe8;
    --card-padding: 15px;
    --thumb-size: 140px;
    --thumb-bg: #dcdad6;
    --thumb-border: 1px solid #999999;
    --thumb-padding: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hierarchy-module .hierarchy-items .resource-list > .resource {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin: 0 0 20px 0 !important;
    padding: var(--card-padding) !important;
    box-sizing: border-box;
    background: var(--card-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hierarchy-module .hierarchy-items .resource-list > .resource::before,
.hierarchy-module .hierarchy-items .resource-list > .resource::after {
    border-radius: 0 !important;
}

.hierarchy-module .hierarchy-items .resource__thumbnail {
    flex: 0 0 var(--thumb-size);
    float: none !important;
    position: static !important;
    width: var(--thumb-size) !important;
    height: var(--thumb-size) !important;
    margin: 0 !important;
    padding: var(--thumb-padding) !important;
    box-sizing: border-box;
    background: var(--thumb-bg);
    border: var(--thumb-border);
    overflow: hidden;
}

.hierarchy-module .hierarchy-items .resource__thumbnail a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.hierarchy-module .hierarchy-items .resource__thumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
}

.hierarchy-module .hierarchy-items .resource__content {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.hierarchy-module .hierarchy-items .resource__meta > a {
    font-weight: 700;
}

.hierarchy-module .hierarchy-items .resource__meta .description {
    margin-top: 8px;
}

/* On narrow screens the thumbnail goes above the text */
@media (max-width: 640px) {
    .hierarchy-module .hierarchy-items .resource-list > .resource {
        flex-direction: column;
    }
}

/* Hide the "Advanced search" link on these pages */
.hierarchy-module .browse-controls a.advanced-search {
    display: none !important;
}



/* ==========================================================================
   16. Hide the Prev / Next page buttons at the bottom of pages
   Purpose: The theme adds "Prev" and "Next" buttons (circles open at the
   bottom) at the end of every site page. They only step through the pages
   in menu order (Recently, Search, Space, ...), which makes no sense for
   visitors, so they are hidden.
   To bring them back: delete this section.
   ========================================================================== */

.site-page-pagination {
    display: none !important;
}


/* ==========================================================================
   17. Inputs, dropdowns, buttons and the filter tag: one look
   Purpose: Search boxes, number boxes, dropdowns (Sort, Per page, filter row)
   and buttons (Search, Reset fields, Sort, Go) all look the same on every
   page: white fields with a thin mid grey border, dark grey buttons with
   white text, square corners like the cards. The small round + / - buttons
   and the page arrows are left as they are. The tag "Selection: ..." above
   a list of items gets dark text on a grey tag, so it is readable. The
   "Advanced search" link below the sort controls is hidden (the Search page
   in the menu does that job).
   To change the colours: #999999 (field border), #555555 (button), #333333
   (button on hover). For round fields and buttons again: set border-radius
   back to a large value such as 999px.
   ========================================================================== */

#content input[type="text"],
#content input[type="search"],
#content input[type="number"],
#content input[type="email"],
#content input[type="password"],
#content textarea,
#content select {
    background-color: #ffffff !important;
    border: 1px solid #999999 !important;
    border-radius: 0 !important;
    color: #333333 !important;
    box-shadow: none !important;
}

#content input[type="text"]:focus,
#content input[type="search"]:focus,
#content input[type="number"]:focus,
#content select:focus {
    border-color: #333333 !important;
    outline: none !important;
}

#content .search-submit,
#content .search-reset,
#content .gotopage-btn,
#content .sorting button,
#content form button[type="submit"],
#content form input[type="submit"] {
    background: #555555 !important;
    color: #ffffff !important;
    border: 1px solid #555555 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#content .search-submit:hover,
#content .search-reset:hover,
#content .gotopage-btn:hover,
#content .sorting button:hover,
#content form button[type="submit"]:hover,
#content form input[type="submit"]:hover {
    background: #333333 !important;
    border-color: #333333 !important;
}

/* Tag above item lists, e.g. "Selection: Peter Voigt" */
.search-filters .filter {
    background: #dcdad6 !important;
    border-radius: 0 !important;
}

.search-filters .filter-label,
.search-filters .filter-value,
.search-filters .filter a {
    color: #333333 !important;
}

/* "Advanced search" link under the sort controls */
.browse-controls .advanced-search-container,
.browse-controls a.advanced-search {
    display: none !important;
}


/* ==========================================================================
   18. Footer: one quiet line, no colours
   Purpose: The footer was two large coloured bands with the text
   "All Rights Reserved. Peter Voigt. 2026". It is now one slim line on the
   page background, separated by a hairline, with small grey centred text,
   like the main site. The text itself is set in the theme settings (footer
   text field): put "(c) Peter Voigt" and a link to strangelove-collection.de
   there.
   To change the grey: #777777 (text), #555555 (links), #dcdad6 (hairline).
   ========================================================================== */

.main-footer__top {
    display: none !important;
}

.main-footer,
.main-footer__bottom {
    background: transparent !important;
    background-image: none !important;
    color: #777777 !important;
}

.main-footer__bottom {
    margin-top: 3rem;
    padding: 1.25rem 0 !important;
    border-top: 1px solid #dcdad6;
}

.main-footer__bottom-container {
    justify-content: center !important;
    text-align: center;
}

.main-footer__copyright,
.main-footer__copyright p,
.main-footer__links {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #777777 !important;
    text-align: center;
}

.main-footer a {
    color: #555555 !important;
}

.main-footer a:hover {
    color: #000000 !important;
}


/* ==========================================================================
   19. "User selections" list: grey cards with thumbnail
   Purpose: The page that lists all shared selections showed each selection as
   a white rounded box with the name in large letters followed by the owner's
   name. Each selection is now a grey card like the other lists: the cover
   photo on the left in the grey square box with a thin border (140 px), the
   selection name beside it in bold, and the owner line hidden (it repeated
   the name). The "My selections" page, which shows the items inside each
   selection, is not changed.
   To show the owner line again: delete the last rule in this section.
   Card color: #ecebe8. Thumbnail box: #dcdad6 with border #999999.
   ========================================================================== */

.selection-list > li.selection:not(:has(.selection-resources)) {
    background: #ecebe8 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.selection-list > li.selection:not(:has(.selection-resources)) > a.resource-link {
    display: flex !important;
    align-items: flex-start;
    gap: 20px;
    text-decoration: none !important;
}

.selection-list > li.selection:not(:has(.selection-resources)) > a.resource-link img {
    display: block !important;
    flex: 0 0 140px;
    width: 140px !important;
    height: 140px !important;
    padding: 8px;
    box-sizing: border-box;
    background: #dcdad6;
    border: 1px solid #999999;
    object-fit: contain;
}

.selection-list > li.selection:not(:has(.selection-resources)) > a.resource-link .resource-name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #333333;
}

/* Owner line (repeats the name): hidden */
.selection-list > li.selection:not(:has(.selection-resources)) > .selection-owner {
    display: none !important;
}


/* ==========================================================================
   20. References page: alphabet buttons as small grey tiles
   Purpose: The letter row at the top (and bottom) of the References page
   (A B C ... Z, jump links to each letter) had black outlines on every box
   and on every list item, so the lines doubled up and the row looked
   cramped. Each letter is now a square tile of equal size in the same
   light warm grey as the cards, with a thin mid grey border, square corners
   and an even gap between the tiles. On hover and keyboard focus the tile
   turns dark grey with white text. Letters without entries (I, K, Q, Y) are
   flat, paler tiles without any border line, so they clearly cannot be clicked.
   The row wraps on narrow screens, and the tiles get a little smaller on
   phones. The letter headings in the list get some space above them.
   To change the tile size: --tile-size. Tile grey: --tile-bg. Border:
   --tile-border. Hover colour: --tile-hover. Gap between tiles: --tile-gap.
   To bring back the old look: delete this section.
   ========================================================================== */

.reference-pagination {
    --tile-size: 40px;
    --tile-gap: 6px;
    --tile-bg: #ecebe8;
    --tile-border: 1px solid #999999;
    --tile-hover: #555555;
    --tile-off-bg: #f1efeb;
    --tile-off-text: #b8b6b1;
}

.reference-pagination .pagination-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--tile-gap);
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* The list items carry no frame of their own (the theme drew a second one) */
.reference-pagination .pagination-range {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Every letter: same square tile */
.reference-pagination .pagination-range > a,
.reference-pagination .pagination-range > span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--tile-size);
    height: var(--tile-size);
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
}

/* Letters with entries: grey tile */
.reference-pagination .pagination-range > a {
    background: var(--tile-bg) !important;
    border: var(--tile-border) !important;
    color: #333333 !important;
}

.reference-pagination .pagination-range > a:hover,
.reference-pagination .pagination-range > a:focus-visible {
    background: var(--tile-hover) !important;
    border-color: var(--tile-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.reference-pagination .pagination-range > a:focus-visible {
    outline: 2px solid #333333;
    outline-offset: 2px;
}

/* Letters without entries: flat, pale, no line on any side, not clickable */
.reference-pagination .pagination-range > span {
    background: var(--tile-off-bg) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--tile-off-text) !important;
    cursor: default;
}

/* No decorative lines from the theme (pseudo-elements) on any tile */
.reference-pagination .pagination-range::before,
.reference-pagination .pagination-range::after,
.reference-pagination .pagination-range > a::before,
.reference-pagination .pagination-range > a::after,
.reference-pagination .pagination-range > span::before,
.reference-pagination .pagination-range > span::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

/* Letter headings in the list: space above */
.references-list .reference-heading {
    margin-top: 2rem;
}

/* Smaller tiles on phones */
@media (max-width: 640px) {
    .reference-pagination {
        --tile-size: 34px;
        --tile-gap: 5px;
    }
}


/* ==========================================================================
   21. Strangelove number under item titles (block template "With identifier")
   Purpose: The block template "With identifier" (themes/Lively/view/common/
   block-template/with-identifier.phtml) prints the item's Strangelove number
   (dcterms:identifier) as <span class="resource__identifier"> directly below
   the title in a browse preview card. This styles it small, grey and
   monospace, so it reads as a catalogue number and does not compete with
   the title.
   To change the size: font-size. Colour: color.
   ========================================================================== */

.resource__identifier {
    display: block;
    margin-top: 0.25em;
    font-family: "Source Code Pro", monospace;
    font-size: 0.75em;
    color: #777777;
    letter-spacing: 0.03em;
}


/* ==========================================================================
   22. Single selection page (e.g. "Favorites"): same grey cards
   Purpose: The page of one selection (the link a guest receives, e.g.
   "Favorites - Peter Wynn Kirby") showed the old plain list: a large
   picture with the title and a long description below. It now looks like
   the browse and search pages: light warm grey cards with square corners,
   the image on the LEFT in the same grey square box with a thin mid grey
   border (140 px), the title in bold beside it, a short description (cut
   off after a few lines) and the "Add to a selection" menu below. The cards
   sit in two columns on wide screens and in one column on phones, where the
   image goes above the text.
   Only the page of a single selection is changed (it is marked by the class
   "selection-flat"). The "My selections" overview (section 3) and the list of
   all shared selections (section 19) keep their own styling.
   To change the image box size: --thumb-size. Card colour: --card-bg.
   Image box: --thumb-bg, --thumb-border. Lines of description shown:
   --desc-lines (to show titles only, add a rule hiding
   .selection-flat .selection-resource > .description). Minimum card width
   (more or fewer columns): --card-min.
   ========================================================================== */

.selection-list.selection-flat .selection-resources {
    --card-bg: #ecebe8;
    --card-padding: 15px;
    --card-min: 380px;
    --thumb-size: 140px;
    --thumb-bg: #dcdad6;
    --thumb-border: 1px solid #999999;
    --thumb-padding: 8px;
    --desc-lines: 4;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr));
    gap: 20px;
    list-style: none;
    margin: 1rem 0 0 0 !important;
    padding: 0 !important;
}

/* The card: image column on the left, text column on the right */
.selection-list.selection-flat .selection-resources > .selection-resource {
    display: grid !important;
    grid-template-columns: var(--thumb-size) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 8px;
    align-content: start;
    align-items: start;
    margin: 0 !important;
    padding: var(--card-padding) !important;
    box-sizing: border-box;
    background: var(--card-bg) !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The link wraps image and title: let both take part in the card grid */
.selection-list.selection-flat .selection-resource > a.resource-link {
    display: contents;
}

/* Image in the grey square box, shown completely */
.selection-list.selection-flat .selection-resource > a.resource-link img {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: block;
    width: var(--thumb-size) !important;
    height: var(--thumb-size) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: var(--thumb-padding);
    box-sizing: border-box;
    background: var(--thumb-bg);
    border: var(--thumb-border);
    object-fit: contain;
}

/* Title */
.selection-list.selection-flat .selection-resource > a.resource-link .resource-name {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
    color: #333333;
}

/* Description: a few lines only */
.selection-list.selection-flat .selection-resource > .description {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--desc-lines);
    line-clamp: var(--desc-lines);
    overflow: hidden;
}

/* "Add to a selection" menu */
.selection-list.selection-flat .selection-resource > ul.actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.selection-list.selection-flat .selection-resource > ul.actions li {
    margin: 0;
    padding: 0;
}

/* Phones: image above the text */
@media (max-width: 640px) {
    .selection-list.selection-flat .selection-resources > .selection-resource {
        grid-template-columns: minmax(0, 1fr);
    }

    .selection-list.selection-flat .selection-resource > a.resource-link img,
    .selection-list.selection-flat .selection-resource > a.resource-link .resource-name,
    .selection-list.selection-flat .selection-resource > .description,
    .selection-list.selection-flat .selection-resource > ul.actions {
        grid-column: 1;
        grid-row: auto;
    }
}


/* ==========================================================================
   23. Links in the metadata values (Subject etc.): blue
   Purpose: Since section 9 removed the underline, the links in the metadata
   list on item pages (Subject, Source, ...) looked like plain text until the
   mouse was over them. They now have a clear blue colour at rest, and a
   darker blue (with underline, from section 9) on hover and keyboard focus.
   Visited links keep the same blue. Only links inside the metadata values
   are changed; menus, cards, buttons and the footer keep their own colours.
   To change the colours: --link-color and --link-hover in section 1.
   ========================================================================== */

.property .values a:not(.selection-toggle),
.property .value a:not(.selection-toggle),
a.uri-value-link {
    color: var(--link-color) !important;
}

.property .values a:not(.selection-toggle):hover,
.property .values a:not(.selection-toggle):focus-visible,
.property .value a:not(.selection-toggle):hover,
.property .value a:not(.selection-toggle):focus-visible,
a.uri-value-link:hover,
a.uri-value-link:focus-visible {
    color: var(--link-hover) !important;
    text-decoration: underline !important;
}