/* =====================================================================
   Omeka S Integration — front-end + admin styles
   Visual language modeled on https://wendemuseum.org/
   (Gill Sans display face, brand red #d4312c, dark #333, cool grey #EEF4F2)

   Theme-defense strategy:
   -----------------------
   Some host themes (notably Wende) set `html { font-size: 62.5% }` so that
   `1rem = 10px`. That makes every rem-based size in a plugin look ~62%
   too small. To stay independent of the host's root-font hack we:
     1. Anchor each top-level OSI wrapper at an absolute `font-size: 16px`.
     2. Use `em` (not `rem`) for every size inside that wrapper — em is
        parent-relative, so all sizes resolve against our 16px anchor and
        ignore the root.
     3. Where host themes have higher specificity (e.g. Wende's global
        `button:not(.field-button) { ... }`) we use `a.osi-button,
        button.osi-button` so the selector specificity wins (0,1,1+) and
        we don't have to reach for !important.
   ===================================================================== */

:root {
    /* Wende-derived palette. Tokens local to this plugin so we don't collide
       with theme variables of the same name. */
    --osi-color-red:        #d4312c;
    --osi-color-red-hover:  #BE943A;   /* the Wende site fades hovered links from red → sand */
    --osi-color-dark:       #333333;
    --osi-color-black:      #000000;
    --osi-color-white:      #ffffff;
    --osi-color-grey:       #EEF4F2;   /* faint mint-grey background */
    --osi-color-grey-2:     #dbe2ea;   /* slightly bluer for borders */
    --osi-color-sand:       #BE943A;
    --osi-color-menu-bg:    #1A1A1A;

    /* Gill Sans first (Mac users get it natively); Lato is the Google-Fonts fallback
       enqueued from PHP; remaining fallbacks are system-stack humanist sans-serifs. */
    --osi-font-sans: "Gill Sans", "Gill Sans MT", "GillSans", "Lato",
                     -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                     Arial, sans-serif;

    --osi-border: 1px solid var(--osi-color-dark);
    --osi-border-thin: 1px solid var(--osi-color-grey-2);
}

/* --------------------------------------------------------------------
   Wrapper anchor — every OSI top-level container locks font-size to
   an absolute pixel value so child `em` units resolve consistently,
   regardless of what `html { font-size: ... }` says.
   -------------------------------------------------------------------- */
.osi-grid-wrapper,
.osi-single,
.osi-search-form {
    font-family: var(--osi-font-sans);
    color: var(--osi-color-dark);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-size: 16px;
}

.osi-grid-wrapper,
.osi-single {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- Search form -------------------------------------------- */
.osi-search-form {
    background: var(--osi-color-grey);
    border: var(--osi-border-thin);
    padding: 1.25em 1.5em;
    border-radius: 0;
    margin-bottom: 2em;
}

/* Simple section — text input + Search button, always visible. */
.osi-search-simple {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;
    align-items: end;
}

@media (max-width: 720px) {
    .osi-search-simple {
        grid-template-columns: 1fr;
    }
}

/* Advanced section — collapsed by default unless any advanced filter is active. */
.osi-search-advanced {
    margin-top: 1.25em;
    border-top: 1px solid var(--osi-color-grey-2);
    padding-top: 1em;
}

.osi-search-advanced__toggle {
    cursor: pointer;
    list-style: none;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--osi-color-red);
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.25em 0;
    transition: color 0.2s ease;
}

.osi-search-advanced__toggle::-webkit-details-marker { display: none; }
.osi-search-advanced__toggle:hover,
.osi-search-advanced__toggle:focus {
    color: var(--osi-color-sand);
    outline: none;
}

/* Custom +/− indicator before the toggle label. */
.osi-search-advanced__toggle::before {
    content: '+';
    display: inline-block;
    width: 0.9em;
    text-align: center;
    font-size: 1.1em;
    line-height: 1;
}
.osi-search-advanced[open] > .osi-search-advanced__toggle::before {
    content: '−';
}

/* Show only the matching label (closed vs open). */
.osi-search-advanced__label-open  { display: none; }
.osi-search-advanced[open] > .osi-search-advanced__toggle .osi-search-advanced__label-closed { display: none; }
.osi-search-advanced[open] > .osi-search-advanced__toggle .osi-search-advanced__label-open   { display: inline; }

.osi-search-advanced__panel {
    margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    align-items: end;
}

.osi-search-advanced__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.25em;
}

.osi-field {
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
}

.osi-field > span {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85em;
    margin-bottom: 0.4em;
    color: var(--osi-color-dark);
}

/* High-specificity input/select overrides — host themes often style
   `input[type=text]` / `select` directly, so we match on the element too. */
.osi-search-form input[type="text"],
.osi-search-form select,
.osi-field input,
.osi-field select {
    border: 1px solid var(--osi-color-dark);
    border-radius: 0;
    padding: 0.6em 0.7em;
    background: var(--osi-color-white);
    font-size: 1em;
    font-family: inherit;
    color: var(--osi-color-dark);
    line-height: 1.3;
    height: auto;
    width: 100%;
    box-sizing: border-box;
}

.osi-field input:focus,
.osi-field select:focus {
    outline: 2px solid var(--osi-color-red);
    outline-offset: -1px;
}

.osi-field--actions {
    display: flex;
    gap: 0.5em;
}

/* Button rule — selectors include element type so we beat Wende's
   `button:not(.field-button) { ... }` (specificity 0,1,1). Ours: 0,1,1+. */
a.osi-button,
button.osi-button,
.osi-search-form .osi-button {
    background: var(--osi-color-dark);
    color: var(--osi-color-white);
    border: 1px solid var(--osi-color-dark);
    padding: 0.7em 1.4em;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    /* Defeat Wende's `button:not(.field-button) { height:5rem; padding:0 70px;
       display:block; margin:0 auto; width:auto }` block. */
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1.2;
    margin: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a.osi-button:hover,
a.osi-button:focus,
button.osi-button:hover,
button.osi-button:focus,
.osi-search-form .osi-button:hover,
.osi-search-form .osi-button:focus {
    background: var(--osi-color-red);
    color: var(--osi-color-white);
    border-color: var(--osi-color-red);
    text-decoration: none;
}

a.osi-button--ghost,
button.osi-button--ghost {
    background: transparent;
    color: var(--osi-color-dark);
    border: 1px solid var(--osi-color-dark);
}

a.osi-button--ghost:hover,
a.osi-button--ghost:focus,
button.osi-button--ghost:hover,
button.osi-button--ghost:focus {
    background: var(--osi-color-dark);
    color: var(--osi-color-white);
}

/* ---------- Grid --------------------------------------------------- */
.osi-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: grid;
    /* Tracks are flexible (1fr) so they truly fill the row and distribute free space evenly.
       Each track is at least 200px wide; the card inside is capped at 350px (see .osi-grid-link).
       Result: items scale smoothly between 200 and 350, then the grid wraps to a new column. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: stretch;
    gap: 1.5em;
}

.osi-grid-item {
    margin: 0;
    /* Center the capped card horizontally inside its (potentially wider) track. */
    display: flex;
    justify-content: center;
}

.osi-grid-link {
    display: block;
    width: 100%;
    max-width: 350px;
    text-decoration: none;
    color: var(--osi-color-dark);
    background: var(--osi-color-white);
    border: none;
    border-radius: 0;
    overflow: hidden;
    /* Kill the default browser focus ring + mobile tap highlight that produces the black outline on click. */
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

/* Click feedback — fade the whole card to 60% while the mouse/finger is down. */
.osi-grid-link:active {
    opacity: 0.6;
}

/* Accessibility: keyboard users (Tab navigation) still get a visible focus ring in brand red.
   Mouse/touch clicks don't trigger :focus-visible in modern browsers, so this won't bring the
   black outline back for normal clicks. */
.osi-grid-link:focus-visible {
    outline: 2px solid var(--osi-color-red);
    outline-offset: 2px;
}

/* Square thumbnail container.
   overflow: visible so ::before can extend beyond the thumb's own box
   (it will still be clipped by the parent .osi-grid-link overflow: hidden). */
.osi-thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    background: transparent;
}

/* Red block that slides in from the left behind the image on hover. */
.osi-thumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--osi-color-red);
    z-index: 0;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.osi-grid-link:hover .osi-thumb::before,
.osi-grid-link:focus .osi-thumb::before {
    width: 50%;
}

.osi-thumb img {
    position: absolute;
    /* 10px padding between image and card edge — red slides behind this gap. */
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: cover;
    display: block;
    z-index: 1;
}

.osi-thumb__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--osi-color-grey-2),
        var(--osi-color-grey-2) 6px,
        var(--osi-color-grey) 6px,
        var(--osi-color-grey) 12px
    );
}

.osi-thumb__placeholder--large {
    aspect-ratio: 1 / 1;
}

.osi-grid-title {
    display: block;
    padding: 0.85em 1em 1em;
    font-weight: 700;
    font-size: 0.82em;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--osi-color-dark);
}

/* ---------- Pagination -------------------------------------------- */
.osi-pagination {
    margin-top: 2.5em;
}

.osi-pagination ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
}

/* Element-qualified selector wins against host themes that style `.page-numbers a`. */
.osi-pagination a.page-numbers,
.osi-pagination span.page-numbers,
.osi-pagination .page-numbers {
    display: inline-block;
    padding: 0.2em 0.4em;
    border: none;
    background: none;
    text-decoration: none;
    color: var(--osi-color-dark);
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

.osi-pagination .page-numbers.current {
    color: var(--osi-color-red);
}

/* ---------- Single item ------------------------------------------- */
.osi-back a {
    text-decoration: none;
    color: var(--osi-color-red);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.osi-back a:hover,
.osi-back a:focus {
    color: var(--osi-color-sand);
}

.osi-single .osi-single__title,
.osi-single__title {
    font-family: var(--osi-font-sans);
    font-size: clamp(1.8em, 3vw, 2.6em);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: var(--osi-color-dark);
    margin: 0.75em 0 1.25em;
    /* Thin red rule under the heading, echoing the Wende h1 treatment. */
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--osi-color-red);
}

.osi-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5em;
    align-items: start;
}

@media (max-width: 820px) {
    .osi-single__layout {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
}

.osi-single__media img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    cursor: zoom-in;
    display: block;
    border: var(--osi-border-thin);
}

.osi-single__media-hint {
    font-size: 0.72em;
    color: var(--osi-color-dark);
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.6em;
}

/* Metadata list */
.osi-meta-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.85em 1.5em;
}

.osi-meta__label {
    font-weight: 700;
    color: var(--osi-color-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85em;
    padding-top: 0.15em;
}

.osi-meta__values {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
    color: var(--osi-color-dark);
}

.osi-meta__value + .osi-meta__value {
    margin-top: 0.2em;
}

.osi-meta__values a {
    color: var(--osi-color-red);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.osi-meta__values a:hover,
.osi-meta__values a:focus {
    color: var(--osi-color-sand);
}

/* ---------- Single item: prev / next navigation ------------------- */
.osi-single-nav {
    margin-top: 3em;
    padding-top: 1.5em;
    border-top: 1px solid var(--osi-color-grey-2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
}

.osi-single-nav__cell--prev { justify-self: start; }
.osi-single-nav__cell--next { justify-self: end;   text-align: right; }

.osi-single-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.85em;
    text-decoration: none;
    color: var(--osi-color-dark);
    max-width: 32em;
    transition: color 0.2s ease;
}

.osi-single-nav__link:hover,
.osi-single-nav__link:focus {
    color: var(--osi-color-red);
    text-decoration: none;
}

.osi-single-nav__arrow {
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.osi-single-nav__link--prev:hover .osi-single-nav__arrow,
.osi-single-nav__link--prev:focus .osi-single-nav__arrow {
    transform: translateX(-4px);
}

.osi-single-nav__link--next:hover .osi-single-nav__arrow,
.osi-single-nav__link--next:focus .osi-single-nav__arrow {
    transform: translateX(4px);
}

.osi-single-nav__text {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

.osi-single-nav__label {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.osi-single-nav__title {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.25;
    /* Trim to two lines with ellipsis so long titles don't blow up the layout. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    .osi-single-nav {
        grid-template-columns: 1fr;
        gap: 1em;
    }
    .osi-single-nav__cell--next {
        justify-self: start;
        text-align: left;
    }
}

/* ---------- Modal ------------------------------------------------- */
/* The modal lives outside the OSI wrappers (so it can be position: fixed
   and not get clipped by anything), which means it doesn't inherit our
   16px font-size anchor. All sizes inside the modal are absolute px. */
.osi-modal {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.92);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    max-width: 100%;
    font-family: var(--osi-font-sans);
}

.osi-modal[hidden] {
    display: none;
}

.osi-modal__inner {
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
}

.osi-modal__img {
    max-width: 95vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.osi-modal__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    color: var(--osi-color-white);
    border: 0;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    /* Defeat Wende's global button reset. */
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    display: block;
}

.osi-modal__close:hover,
.osi-modal__close:focus {
    color: var(--osi-color-red);
}

/* ---------- Errors ------------------------------------------------ */
.osi-error {
    padding: 0.9em 1.1em;
    background: var(--osi-color-white);
    color: var(--osi-color-red);
    border: 1px solid var(--osi-color-red);
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85em;
}

.osi-empty {
    text-align: center;
    font-style: italic;
    color: var(--osi-color-dark);
    opacity: 0.7;
    padding: 2em 0;
}

.osi-result-count {
    margin: 0 0 1.25em 0;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--osi-color-dark);
    opacity: 0.75;
}

/* =====================================================================
   Admin — drag/drop sortable list for field order
   Admin already uses default WordPress 13px root, so we leave rem alone
   here (the 62.5% hack is a public-theme concern).
   ===================================================================== */
.osi-sortable {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    max-width: 600px;
}

.osi-sortable-item {
    background: var(--osi-color-white);
    border: 1px solid var(--osi-color-grey-2);
    border-radius: 0;
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: move;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.osi-sortable-item:hover {
    border-color: var(--osi-color-red);
    background: var(--osi-color-grey);
}

.osi-sortable-item .dashicons {
    color: var(--osi-color-dark);
}

.osi-sortable-item code {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--osi-color-dark);
    background: var(--osi-color-grey);
    padding: 0.15rem 0.45rem;
    border-radius: 0;
    font-family: ui-monospace, Menlo, monospace;
}