/* tulips.css: initial copy from default.css (2025-09-11) */
@import url('default.css');

/* Place overrides below (custom tokens defined below). */

/* Future overrides will replace rules instead of editing default.css directly. */

/* =============================================================
   Tulips palette (cheerful & accessible)
   - Base font color kept near #182026 for strong contrast
   - Vibrant accents with moderated saturation
   - Minimum contrast ratio ~4.5:1 for normal text where possible
   ============================================================= */
:root {
    --tulips-bg: #fdfcfa;
    --tulips-surface: #ffffff;
    --tulips-border: #d9d5ce;
    --tulips-text: #182026;
    --tulips-text-muted: #4d5a63;
    --tulips-primary: #1565c0;
    /* Deep azure */
    --tulips-primary-rgb: 21, 101, 192;
    --tulips-primary-accent: #1e7fe6;
    --tulips-secondary: #ff7b2f;
    /* Vivid but readable on white */
    --tulips-secondary-accent: #ff933b;
    --tulips-tertiary: #7e3ff2;
    /* Accent purple */
    --tulips-positive: #0f9d58;
    --tulips-warning: #ffb300;
    --tulips-danger: #d84343;
    --tulips-focus: #ffb300;
    /* shared outline */
    /* Link colors (darker base, brighter on hover) */
    --tulips-link: #0f4f96;
    /* darker blue for normal state */
    --tulips-link-hover: #1e7fe6;
    /* brighter hover */
    --tulips-radius-sm: 3px;
    --tulips-radius-md: 6px;
    --tulips-shadow-sm: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .02);
    --tulips-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08);
    /* Thumbnail sizing (reverted to early 240px square plan) */
    --tulips-thumb-size: 240px;
    /* Path to the mascot image for item right sidebar (can be adjusted) */
    --sidebar-mascot-image: url('../img/tulip-san.svg');
    /* Path for Off-canvas search mascot (SVG) */
    --offcanvas-mascot-image: url('../img/gama-jumper.svg');
}

/* Redundant declaration (in case of partial load ordering) */
body {
    --tulips-thumb-size: 240px;
}

html,
body {
    background: var(--tulips-bg);
    color: var(--tulips-text);
}

/* Typography tweaks */
body {
    font-weight: 400;
    overflow-wrap: anywhere;
    font-feature-settings: "palt" 1;
}

h1,
h2,
h3,
h4,
h5 {
    color: var(--tulips-text);
    font-weight: 400;
}

small,
.fine-print {
    color: var(--tulips-text-muted);
}

/* Links */
/* Base links */
a {
    color: var(--tulips-link);
    text-decoration: none;
    transition: color .15s ease;
}

/* Visually hidden (screen-reader only) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a:hover,
a:focus {
    color: var(--tulips-link-hover);
}

a:active {
    color: var(--tulips-link-hover);
    filter: brightness(1.1);
}

thead,
tbody,
tfoot {
    border: none;
}

tbody th,
tbody td {
    border: 1px solid #f1f1f1;
}

html[lang="ja"] .item.resource.browse.item-set .stack dd[lang="en"] {
    display: none;
}

html[lang="en-US"] .item.resource.browse.item-set .stack dd[lang="ja"] {
    display: none;
}

.item.resource.browse.item-set .stack dt {
    display: none;
}

.item.resource.browse.item-set .stack .property:nth-child(1) dd .value-content {
    /*
    font-size: 2.5rem;
    color: var(--tulips-text);
    font-weight: 400;
    margin-bottom: 2rem;
*/
    display: none;
}

/* Resource list item names */
.resource-name a {
    color: var(--tulips-link);
    text-decoration: none;
}

.resource-name a:hover,
.resource-name a:focus {
    color: var(--tulips-link-hover);
}

/* Buttons (override Foundation classes) */
.button,
button,
[type=submit],
.primary.button {
    background: linear-gradient(135deg, var(--tulips-primary), var(--tulips-primary-accent));
    border: 1px solid rgba(var(--tulips-primary-rgb), .9);
    color: #fff;
    border-radius: var(--tulips-radius-sm);
    box-shadow: var(--tulips-shadow-sm);
    transition: background .2s, box-shadow .2s, transform .08s;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
[type=submit]:hover,
[type=submit]:focus {
    background: linear-gradient(135deg, var(--tulips-primary-accent), var(--tulips-primary));
    box-shadow: var(--tulips-shadow-md);
}

.button:active {
    transform: translateY(1px);
}

body.items.search #advanced-search #resource-class,
body.items.search #advanced-search>div.advanced-search-content>div:nth-child(5),
body.items.search #advanced-search>div.advanced-search-content>div:nth-child(6) {
    display: none;
}

/* Force solid background for simple submit buttons (search etc.) */
button[type=submit],
input[type=submit],
.search-form .button[type=submit] {
    background: var(--tulips-primary-accent) !important;
    /* original theme blue */
    color: #fff !important;
    border: 1px solid #10609a;
    background-image: none !important;
    white-space: nowrap
}

button[type=submit]:hover,
input[type=submit]:hover,
.search-form .button[type=submit]:hover {
    background: #1b86d0 !important;
}

button[type=submit]:focus,
input[type=submit]:focus,
.search-form .button[type=submit]:focus {
    box-shadow: 0 0 0 2px rgba(23, 121, 186, .35);
}

.browse-controls button,
.browse-controls .button {
    font-size: inherit;
}

.label,
.field-meta label,
.filter-label {
    background: var(--tulips-primary-accent);
}

.menu .active>a,
.toc-block>ul .active>a,
.toc-block ul ul .active>a {
    background: var(--tulips-primary-accent);
    color: #fefefe;
    border-radius: var(--tulips-radius-sm);
    box-shadow: var(--tulips-shadow-sm);
    transition: background .2s, box-shadow .2s, transform .08s;
    border: 1px solid #10609a;
    padding: .85rem 1rem;
}

#multi-search-input {
    margin-right: 0;
}

/* --- Search form specific button (temporary test color) --- */
/* (removed test cyan search button override) */

/* Secondary / warning style (use .secondary) */
.button.secondary,
.secondary.button {
    background: var(--tulips-secondary);
    border-color: var(--tulips-secondary);
    color: #fff;
}

.button.secondary:hover,
.secondary.button:hover {
    background: var(--tulips-secondary-accent);
}

/* Positive, warning, danger utility classes */
.button.success,
.success.button {
    background: var(--tulips-positive);
    border-color: var(--tulips-positive);
}

.button.success:hover,
.success.button:hover {
    filter: brightness(1.1);
}

.button.warning,
.warning.button {
    background: var(--tulips-warning);
    border-color: var(--tulips-warning);
    color: #222;
}

.button.warning:hover,
.warning.button:hover {
    filter: brightness(1.05);
}

.button.alert,
.alert.button {
    background: var(--tulips-danger);
    border-color: var(--tulips-danger);
}

.button.alert:hover,
.alert.button:hover {
    filter: brightness(1.05);
}

.sorting [type=submit] {
    width: 200px;
}

/* Sorting form: make select boxes slightly narrower by default */
.sorting select {
    /* restore default width */
    max-width: none;
}

/*.item.resource.browse #content h2,*/
/*.item-set.resource.browse #content h2,*/
.item.resource.browse.item-set #content h3 {
    display: none;
}

/* =============================================================
   Browse controls layout
   - Default: allow wrapping; place Advanced search below sorting, right-aligned
   ============================================================= */
.browse-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
    font-size: 14px;
}

.browse-controls .pagination {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.browse-controls .sorting {
    order: 2;
}

.browse-controls .advanced-search {
    order: 3;
    width: 100%;
    text-align: right;
}


/* Cards / panels */
.panel,
.card,
/*.resource.show .full-width-main,*/
.resource.show .left-sidebar,
.resource.show .right-sidebar,
.resource.show .main-with-sidebar {
    background: var(--tulips-surface);
    border: 1px solid var(--tulips-border);
    border-radius: var(--tulips-radius-sm);
    box-shadow: var(--tulips-shadow-sm);
    padding: 12px;
}

/* -------------------------------------------------------------
   Item page Right sidebar: background mascot
   - Show the provided character as a background at bottom-right
   - Height fixed at 120px (auto width)
   ------------------------------------------------------------- */
.resource.show .right-sidebar {
    background-image: var(--sidebar-mascot-image);
    background-repeat: no-repeat;
    background-position: right 2px bottom 2px;
    background-size: auto 200px;
    /* Reserve space so content doesn't overlap the mascot */
    padding-bottom: 200px;
}

/* Navigation (top) */
header {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

header a {
    color: var(--tulips-text);
}

header a:hover {
    color: var(--tulips-link-hover);
}

/* Remove global focus outline only for navigation menu items (header + off-canvas) */
.top-bar .menu a:focus,
.top-bar .menu a:focus-visible,
#offCanvas .menu a:focus,
#offCanvas .menu a:focus-visible,
.top-bar .menu button:focus,
#offCanvas .menu button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Top bar accent line */
.top-bar {
    border-top: 3px solid var(--tulips-primary-accent);
    /* subtle bright blue accent */
}

.top-bar-right .search {
    margin-left: .5rem;
}

.site-title {
    margin-right: 16px !important;
}

/* Site logo sizing */
.site-title .site-logo {
    display: inline-block;
    width: 400px;
    height: auto;
    max-width: 100%;
    margin: .3rem;
    vertical-align: middle;
}

.blocks {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Tablet landscape (~1024px) reduce logo width slightly to free menu space */
@media screen and (orientation: landscape) and (min-width: 64em) and (max-width: 74.99875em) {
    .site-title .site-logo {
        width: 380px;
    }

    /* Narrow search input slightly to leave more room for nav */
    header .search-form__input {
        flex: 0 1 100px;
        width: 100px;
        max-width: 100px;
        min-width: 100px;
        /* override base 180px */
        margin: 0;
    }

    /* Slightly tighten spacing in header search */
    header .search-form {
        gap: .5rem;
    }
}

/* iPad Pro portrait (width exactly 1024px): narrow header search input as well */
@media screen and (orientation: portrait) and (min-width: 1024px) and (max-width: 1024px) {
    header .search-form__input {
        flex: 0 1 100px;
        width: 100px;
        max-width: 100px;
        min-width: 100px;

        /* override base 180px */
        .browse-controls .advanced-search {
            order: unset;
            width: auto;
            margin-left: auto;
            text-align: right;
        }

        margin: 0;
    }

    header .search-form {
        gap: .5rem;
    }
}

.title-bar button {
    color: #ffffff;
    margin-right: 6px;
}

/* Footer */
footer {
    background: #212b36;
    color: #dfe5ea;
    padding: 16px;
}

footer a {
    color: #ffffff;
}

footer a:hover {
    color: var(--tulips-secondary-accent);
}

/* Forms */
input[type=text],
input[type=search],
textarea,
select {
    border-radius: var(--tulips-radius-sm);
    border-color: var(--tulips-border);
    background: #fff;
    transition: box-shadow .15s, border-color .15s;
}

input[type=text]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
    border-color: var(--tulips-primary-accent);
    box-shadow: 0 0 0 2px rgba(var(--tulips-primary-rgb), .25);
}

.multi-search-logic [type=radio] {
    margin: auto;
}

/* Tables */
table {
    border-color: var(--tulips-border);
}

thead {
    background: #f6f8fa;
}

thead th {
    color: var(--tulips-text-muted);
    font-weight: 400;
}

tbody tr:nth-child(even) {
    background: #fafbfc;
}

tbody td:hover {
    background: #f0f6ff;
}

/* Resource value headings */
.property h4,
.property .property-name {
    color: var(--tulips-text-muted);
    font-weight: 400;
}

.property {
    margin-bottom: 20px;
}

.property dt,
.property .value {
    margin-bottom: 0;
}

.property .value .language {
    display: none;
}

/* Badges / labels */
.badge,
.label {
    background: var(--tulips-tertiary);
    color: #fff;
}

/* Pagination */
.pagination a,
.pagination button {
    color: var(--tulips-link);
}

.omeka-pagination {
    /* Prevent wrapping and allow horizontal scroll if too narrow */
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
    align-items: flex-start;
    overflow: visible;
    font-size: 14px;
}

/* Override upstream fixed width on .omeka-pagination at >=40em */
@media print,
screen and (min-width: 40em) {
    .omeka-pagination {
        width: auto !important;
        max-width: 100% !important;
        overflow: visible;
        margin: 0;
    }
}

.pagination span {
    /* Prevent line breaks inside pagination text */
    white-space: nowrap;
}

.pagination .current {
    background: var(--tulips-primary);
    color: #fff;
}

.omeka-pagination .page-input-top,
.omeka-pagination .button-group {
    margin-right: 8px;
}

/* Drupal-like pager */
.omeka-pagination .pager__top {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

/* TEMP 2025-09-28: Hide standard pager top (page input + count)
   Note: Remove or comment out this block to restore it quickly. */
.omeka-pagination .pager__top {
    display: none;
}

.omeka-pagination .pager__list {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    /* tighter spacing */
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: inherit;
}

/* Page-jump (Go to page) compact form */
.omeka-pagination .pager__jump {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
}

.omeka-pagination .pager__jump input[type="number"],
.omeka-pagination .pager__jump input[type="text"] {
    width: 4.2rem;
    /* allow up to 4-digit comfortably */
    height: 1.9rem;
    padding: 0 .35rem;
    line-height: 1.9rem;
    margin-right: 0;
}

.omeka-pagination .pager__jump .button,
.omeka-pagination .pager__jump button[type="submit"] {
    height: 1.9rem;
    padding: 0 .5rem;
    line-height: 1.2rem;
}

/* Place jump and range on the same row (desktop) */
.omeka-pagination .pager__after {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: 0;
}

.omeka-pagination .pager__range,
.omeka-pagination .pager__range-text {
    color: var(--tulips-text-muted);
    white-space: nowrap;
    display: inline-block;
    margin: auto;
}

.omeka-pagination .pager__item a,
.omeka-pagination .pager__item span {
    display: inline-flex;
    height: 1.9rem;
    /* slightly shorter */
    padding: 0 .4rem;
    /* compact padding */
    border-radius: var(--tulips-radius-sm);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--tulips-border);
    background: #fff;
    color: var(--tulips-link);
    font-variant-numeric: tabular-nums;
    /* align digit widths */
    font-feature-settings: "tnum" 1;
}

.omeka-pagination .pager__item a:hover,
.omeka-pagination .pager__item a:focus {
    text-decoration: none;
    background: rgba(var(--tulips-primary-rgb), .06);
    border-color: var(--tulips-primary-accent);
}

.omeka-pagination .pager__item.is-active span[aria-current="page"] {
    background: var(--tulips-primary);
    color: #fff;
    border-color: var(--tulips-primary);
    font-weight: 500;
}

.omeka-pagination .pager__item.is-disabled span {
    opacity: .4;
}

.omeka-pagination .pager__ellipsis {
    padding: 0 .2rem;
}

/* Break pager__after to next line at <= 767px (47.9375em) */
@media (max-width: 47.9375em) {
    .omeka-pagination .pager__after {
        display: flex;
        /* block-level flex to break line */
        width: 100%;
        align-items: flex-start;
        gap: .35rem;
    }
}

/* Mobile-tight pager: shrink height/padding and gaps */
@media (max-width: 30em) {

    /* Stack pager vertically on small screens */
    .omeka-pagination {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        font-size: 13px;
    }

    .omeka-pagination .pager__list {
        gap: .1rem;
        overflow-x: auto;
        /* keep horizontal scroll for numbers */
    }

    .omeka-pagination .pager__item a,
    .omeka-pagination .pager__item span {
        height: 1.6rem;
        padding: 0 .3rem;
        font-size: inherit;
    }

    .omeka-pagination .pager__jump input[type="number"],
    .omeka-pagination .pager__jump input[type="text"] {
        width: 3.4rem;
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 0 .25rem;
        font-size: inherit;
        margin-right: 0;
    }

    .omeka-pagination .pager__jump .button,
    .omeka-pagination .pager__jump button[type="submit"] {
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 0 .4rem;
        font-size: inherit;
    }

    /* Stack jump and range on very small screens */
    .omeka-pagination .pager__after {
        margin-left: 0;
    }

    .omeka-pagination .pager__jump button[type="submit"] {
        font-size: inherit;
    }

    /* Place jump form on the second row and align left */
    .omeka-pagination .pager__jump {
        align-self: flex-start;
        margin-left: 0;
        /* override desktop spacing */
        margin-top: .25rem;
        /* small gap from numbers */
    }
}

/* -------------------------------------------------------------
   ≤ 639px (<= 39.9375em): ページャー2行構成
   [ .pager__list ][ .pager__jump ]
   [ .pager__range ]
   既存の <=480px 縦積みや <=767px の改行よりも強い指定で上書き
   ------------------------------------------------------------- */
@media (max-width: 39.9375em) {

    /* 親をグリッド化して2行構成を明示 */
    .omeka-pagination {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-auto-rows: auto;
        grid-template-areas:
            "list jump ."
            "range range range";
        align-items: start;
        row-gap: .35rem;
        column-gap: .5rem;
        /* グリッド内で要素が正しく改行されるように */
        white-space: normal;
    }

    /* 下ページャー（およびグループ下部）では white-space を確実に解除 */
    .browse-pagination-bottom .omeka-pagination,
    .groups-pagination-bottom .omeka-pagination {
        white-space: normal;
    }

    /* pager__after をレイアウト上は分解し、子要素を直接配置 */
    .omeka-pagination .pager__after {
        display: contents;
    }

    /* 行・列の割当て */
    .omeka-pagination .pager__list {
        grid-area: list;
    }

    .omeka-pagination .pager__jump {
        grid-area: jump;
        justify-self: start;
        align-self: start;
        margin-left: 0;
    }

    .omeka-pagination .pager__range,
    .omeka-pagination .pager__range-text {
        grid-area: range;
        margin: 0;
    }

    /* 左寄せを明示（3要素すべて） */
    .omeka-pagination .pager__list,
    .omeka-pagination .pager__jump,
    .omeka-pagination .pager__range,
    .omeka-pagination .pager__range-text {
        justify-self: start;
        text-align: left;
    }

    /* サイズ微調整（小画面） */
    .omeka-pagination .pager__jump input[type="number"],
    .omeka-pagination .pager__jump input[type="text"] {
        width: 3.6rem;
    }
}

/* -------------------------------------------------------------
   最終上書き: ≤ 480px（<= 30em）では3段（list / jump / range）に縦並び
   639px以下の2段指定より後に置いて、確実にこちらを優先
   ------------------------------------------------------------- */
@media (max-width: 30em) {
    .omeka-pagination {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas:
            "list"
            "jump"
            "range";
        row-gap: .3rem;
        column-gap: 0;
        align-items: start;
        justify-items: start;
        white-space: normal;
        font-size: 13px;
    }

    /* ラッパー解除して子要素を直接グリッドに配置 */
    .omeka-pagination .pager__after {
        display: contents;
    }

    .omeka-pagination .pager__list {
        grid-area: list;
        justify-self: start;
        text-align: left;
    }

    .omeka-pagination .pager__jump {
        grid-area: jump;
        justify-self: start;
        text-align: left;
        margin-left: 0;
    }

    .omeka-pagination .pager__range,
    .omeka-pagination .pager__range-text {
        grid-area: range;
        justify-self: start;
        text-align: left;
        margin: 0;
    }
}

/* Inline row-count next to Next button (legacy simple pager) */
.omeka-pagination .button-group .row-count--inline {
    display: inline-flex;
    align-items: center;
    height: 1.9rem;
    margin-left: .5rem;
    color: var(--tulips-text-muted);
    white-space: nowrap;
}

/* Focus outline (disabled site-wide per request)
   Note: This removes the global orange focus ring from all focused elements.
   If you later want to keep focus indication for keyboard users only,
   consider switching to :focus-visible (see commented block below). */
:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Optional, accessible alternative (commented out):
:focus-visible {
    outline: 2px solid var(--tulips-focus);
    outline-offset: 1px;
}
*/

/* Alerts */
.callout.primary {
    background: #e8f2fc;
    border-color: var(--tulips-primary);
}

.callout.warning {
    background: #fff7e0;
    border-color: var(--tulips-warning);
}

.callout.alert {
    background: #fdecec;
    border-color: var(--tulips-danger);
}

.callout.success {
    background: #e3f6ed;
    border-color: var(--tulips-positive);
}

/* Export links in right sidebar */
.right-sidebar .panel {
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.right-sidebar .panel .export-links__title,
.right-sidebar .panel .download-panel__title {
    margin-top: 0;
    font-size: 16px;
    font-weight: bold;
}

.right-sidebar .panel .export-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.right-sidebar .panel .export-links a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.right-sidebar .panel .export-links a:hover,
.right-sidebar .panel .export-links a:focus {
    text-decoration: underline;
}

.right-sidebar .panel .export-links img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: .35rem;
}

/* Download panel */
.right-sidebar .download-panel {
    margin-top: 12px;
}

.right-sidebar .download-panel__controls {
    display: flex;
    gap: .35rem;
    margin-top: .35rem;
}

.right-sidebar .download-panel__list-wrap {
    max-height: 10.5rem;
    /* 約5行分 */
    overflow-y: auto;
    margin-bottom: .5rem;
}

.right-sidebar .download-panel__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.right-sidebar .download-panel__row {
    border-bottom: 1px dashed var(--tulips-border);
    padding: .25rem 0;
}

.right-sidebar .download-panel__row label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    /* 改行禁止 */
}

.right-sidebar .download-panel__row label .download-panel__check {
    margin: auto 0 auto 4px;
}

.right-sidebar .download-panel__label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.right-sidebar .download-panel__actions {
    margin-top: .5rem;
}

.right-sidebar .download-panel__progress {
    margin-top: .35rem;
    font-size: .85rem;
    color: #555;
}

/* 選択ボタン類の文字色を白に固定 */
.right-sidebar .download-panel .button,
.right-sidebar .download-panel [data-action] {
    color: #fff !important;
    font-size: 13px;
}

.right-sidebar .download-panel__terms {
    font-size: 14px;
    line-height: 2.5;
}

/* Gallery / media tweaks (if any) */
.media-list .media.resource {
    border: 1px solid var(--tulips-border);
    border-radius: var(--tulips-radius-sm);
}

.media-list .media.resource:hover {
    box-shadow: var(--tulips-shadow-sm);
}

/* =============================================================
   Uniform square thumbnails (early 240px plan)
   - 240px fixed squares
   - object-fit: cover for center crop
   ============================================================= */
.media-list a.thumbnail,
.media-list .thumbnail,
.resource-grid .resource img.thumbnail,
.resource-grid .resource .resource-link img,
.media-list .resource-link img,
.media-list img,
/* Apply same thumbnails to Preview block lists as well (IIIF provides 240x240) */
.resource-list a.thumbnail,
.resource-list .thumbnail,
.resource-list .resource-link img,
.resource-list img {
    width: 100% !important;
    height: auto !important;
    background: #fff;
    display: inline-block;
    margin: 0 0 .5rem 0;
}

/* Preview block (browsePreview) uses .resource-grid with .resource-image wrapper */
.preview-block .resource-grid .resource-image a.thumbnail,
.preview-block .resource-grid .resource-image img {
    width: 100% !important;
    height: auto !important;
    display: inline-block;
    background: #fff;
    margin-bottom: 0;
}

/* Resource link width to align grid */
.media-list .media.resource .resource-link,
.resource-grid .resource .resource-link,
.resource-grid .resource .description,
.resource-list .resource-link {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* Reserve 240x240 space to avoid CLS while IIIF images load */
.thumb-frame {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tulips-border);
    /* Make the inner padding configurable */
    --thumb-padding: 6px;
    padding: var(--thumb-padding);
    /* border と画像の間に余白 */
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.thumb-frame>img.thumbnail {
    /* Safari/Chrome: var(--thumb-padding) を明示的に差し引いて右下のはみ出しを防止 */
    position: absolute;
    top: var(--thumb-padding);
    left: var(--thumb-padding);
    width: calc(100% - (2 * var(--thumb-padding))) !important;
    height: calc(100% - (2 * var(--thumb-padding))) !important;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
    display: block;
    border: none !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity .2s ease;
}

/* Skeleton loading animation while image loads */
.thumb-frame::before {
    content: "";
    position: absolute;
    inset: var(--thumb-padding);
    /* 内側の余白に合わせる */
    border-radius: 2px;
    background: linear-gradient(90deg, #eee 25%, #e3e3e3 37%, #eee 63%);
    background-size: 400% 100%;
    animation: tulips-skeleton 1.2s ease-in-out infinite;
    opacity: 1;
    transition: opacity .2s ease;
}

.thumb-frame.is-loaded::before {
    opacity: 0;
    pointer-events: none;
}

.thumb-frame.is-loaded>img.thumbnail {
    opacity: 1;
}

@keyframes tulips-skeleton {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* Remove default Foundation thumbnail borders/shadows to avoid flashing top/bottom lines */
a.thumbnail,
img.thumbnail {
    border: none !important;
    box-shadow: none !important;
}

/* Align preview block image wrapper to thumbnail width */
.preview-block .resource-grid .resource-image,
.preview-block .resource-grid .resource-meta {
    width: 100%;
    margin: 0;
}

/* Slightly larger padding no longer needed; revert to default spacing */
.resource-grid .resource {
    padding: .5rem;
}

/* Title styling: 20px font, clamp to ~3 lines */
.resource-grid .resource .resource-name,
.media-list .media.resource .resource-name {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* future standard */
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.25em * 3 + 2px);
    margin-bottom: .25rem;
}

/* Prevent misaligned focus ring when the anchor is wider than the image frame */
.resource-grid .resource .resource-link:focus,
.resource-list .resource-link:focus,
.media-list .media.resource .resource-link:focus {
    outline: none;
}

/* Draw focus ring on the actual visible image frame */
.resource-grid .resource .resource-link:focus .thumb-frame,
.resource-list .resource-link:focus .thumb-frame,
.media-list .media.resource .resource-link:focus .thumb-frame {
    outline: 2px solid var(--tulips-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.resource-grid {
    margin: 1rem 0 2rem 0;
}

/* =============================================================
   Responsive grid columns for resource listings (force grid)
   - Apply directly on browse pages and preview block regardless of list/grid toggle
   - Smartphone portrait: 2 columns, Tablet portrait: 3, Tablet landscape/Desktop: 4
   ============================================================= */
/* Containers to force grid layout */
.item.resource.browse ul.resources,
.item-set.resource.browse ul.resources,
.preview-block ul.resources {
    display: grid !important;
    /* Base: allow 2+ columns but don't shrink below 180px */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: start;
    justify-items: center;
    list-style: none;
    padding-left: 0;
}

.item.resource.browse ul.resources>li,
.item-set.resource.browse ul.resources>li,
.preview-block ul.resources>li {
    margin: 0;
    min-width: 196px;
}

/* Neutralize legacy list (media-object) layout inside grid */
.item.resource.browse ul.resources .resource.media-object,
.item-set.resource.browse ul.resources .resource.media-object,
.preview-block ul.resources .resource.media-object {
    display: block;
}

.item.resource.browse ul.resources .media-object-section,
.item-set.resource.browse ul.resources .media-object-section,
.preview-block ul.resources .media-object-section {
    width: 100% !important;
}

/* Ensure the thumbnail frame never collapses too small */
.item.resource.browse ul.resources .thumb-frame,
.item-set.resource.browse ul.resources .thumb-frame {
    min-width: 180px;
}

/* Override old fixed-width wrappers inside grid */
.item.resource.browse ul.resources .resource .resource-link,
.item.resource.browse ul.resources .resource .description,
.item-set.resource.browse ul.resources .resource .resource-link,
.item-set.resource.browse ul.resources .resource .description,
.preview-block ul.resources .resource .resource-link,
.preview-block ul.resources .resource .description {
    width: 100% !important;
    margin: 0 !important;
    max-width: 260px;
    min-width: 180px;
}

/* Ensure metadata blocks (title/description) use the same width constraints */
.resource-grid .resource .resource-meta .resource-name,
.resource-grid .resource .resource-meta .description,
.media-list .media.resource .resource-meta .resource-name,
.media-list .media.resource .resource-meta .description,
.preview-block .resource-grid .resource-meta .resource-name,
.preview-block .resource-grid .resource-meta .description,
.preview-block .resource-list .resource-meta .resource-name,
.preview-block .resource-list .resource-meta .description {
    width: 100%;
    max-width: 260px;
}

/* Tablet portrait and up: aim for ~3 columns with a larger min */
@media screen and (min-width: 48em) {

    .item.resource.browse ul.resources,
    .item-set.resource.browse ul.resources {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .item.resource.browse ul.resources>li,
    .item-set.resource.browse ul.resources>li {
        min-width: 216px;
    }

    .item.resource.browse ul.resources .thumb-frame,
    .item-set.resource.browse ul.resources .thumb-frame {
        min-width: 200px;
    }

    /* Preview blocks: align with item/item-set at this breakpoint */
    .preview-block ul.resources {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    .preview-block ul.resources>li {
        min-width: 216px;
    }

    .preview-block ul.resources .thumb-frame {
        min-width: 200px;
    }

    /* Ensure link matches thumbnail min width at this breakpoint */
    .item.resource.browse ul.resources .resource .resource-link,
    .item-set.resource.browse ul.resources .resource .resource-link,
    .preview-block ul.resources .resource .resource-link {
        min-width: 200px !important;
    }
}

/* Desktop (>= 66.125em ~1058px): prefer ~4 columns with larger min (240px) */
@media screen and (min-width: 66.125em) {

    .item.resource.browse ul.resources,
    .item-set.resource.browse ul.resources {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    .item.resource.browse ul.resources>li,
    .item-set.resource.browse ul.resources>li {
        min-width: 256px;
    }

    .item.resource.browse ul.resources .thumb-frame,
    .item-set.resource.browse ul.resources .thumb-frame {
        min-width: 240px;
    }

    /* Preview: align size with item/item-set on desktop */
    .preview-block ul.resources {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
    }

    .preview-block ul.resources>li {
        min-width: 256px;
    }

    .preview-block ul.resources .thumb-frame {
        min-width: 240px;
    }

    /* Ensure link matches thumbnail min width on desktop */
    .item.resource.browse ul.resources .resource .resource-link,
    .item-set.resource.browse ul.resources .resource .resource-link,
    .preview-block ul.resources .resource .resource-link {
        min-width: 240px !important;
    }
}

/* (Removed overriding rule that forced preview blocks to 180px min at all widths) */

/* =============================================================
   Preview block title clamp (match item list)
   - Limit titles to ~3 lines within preview blocks
   ============================================================= */
.preview-block .resource-grid .resource-meta h4,
.preview-block .resource-grid .resource-meta .resource-name,
.preview-block .resource-list .resource-meta h4,
.preview-block .resource-list .resource-meta .resource-name {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.25em * 3 + 2px);
    margin-bottom: .25rem;
}

/* =============================================================
   Item Sets listing (reuse same 4-column design)
   Add a wrapper class .item-set-grid in template if not present.
   ============================================================= */
.item-set-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
}

.item-set-grid .item-set {
    width: 25%;
    padding: .5rem;
}

@media print,
screen and (max-width: 63.99875em) {
    .item-set-grid .item-set {
        width: 50%;
    }
}

.item-set-grid .item-set .item-set-name {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.25em * 3 + 2px);
    margin: .5rem 0 .25rem;
}

.item-set-grid .item-set a.thumbnail img,
.item-set-grid .item-set img.thumbnail,
.item-set-grid .item-set .resource-link img {
    /* sizes now handled by wrapper rules */
    background: #fff;
}

/* Links inside metadata values */
/* Links inside metadata values inherit base style */
.value a {
    text-decoration: none;
}

.value a:hover {
    text-decoration: none;
}

/* Metadata Browse: add a search icon after search links */
.metadata-browse-direct-link::after,
.metadata-browse-link::after {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    margin-left: .1em;
    vertical-align: text-bottom;
    background-color: currentColor;
    /* icon color follows link color */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'%3E%3Ccircle cx='136' cy='125.5' r='71'/%3E%3Cline x1='179' y1='186.5' x2='235' y2='245.5'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23000' stroke-width='20' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'%3E%3Ccircle cx='136' cy='125.5' r='71'/%3E%3Cline x1='179' y1='186.5' x2='235' y2='245.5'/%3E%3C/g%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    opacity: .95;
}

/* Selection highlight */
::selection {
    background: var(--tulips-secondary);
    color: #fff;
}

/* Skip link visibility */
#skipnav:focus {
    position: static;
    clip: auto;
    width: auto;
    height: auto;
    padding: .5rem 1rem;
    background: var(--tulips-primary);
    color: #fff;
}

/* Utility accent borders */
.border-accent {
    border-color: var(--tulips-primary) !important;
}

.bg-accent {
    background: var(--tulips-primary) !important;
    color: #fff !important;
}

/* Smooth transitions for global elements */
body,
header,
footer,
.panel,
.card {
    transition: background-color .3s, color .3s, box-shadow .3s;
}

/* =============================================================
   Footer credits layout (PC: image right aligned, Mobile: stacked)
   ============================================================= */
.footer-credits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.footer-credits__left {
    min-width: 0;
}

.footer-credits__right {
    margin-left: auto;
    /* push to right on desktop */
}

.footer-credits__right img {
    display: block;
    height: auto;
    max-width: 100%;
}

@media (max-width: 640px) {
    .footer-credits {
        display: block;
        /* stack vertically */
    }

    .footer-credits__right {
        margin-top: .5rem;
        /* spacing between text and image */
    }

    .footer-credits__right img {
        float: none !important;
        /* override any inline float on mobile */
    }
}

/* =============================================================
   Force square center-crop thumbnails across all lists
   - Override any downstream height:auto !important
   - Ensure aspect-ratio frame + object-fit cover always apply
   ============================================================= */
.resource-grid .resource .thumb-frame>img.thumbnail,
.resource-list .thumb-frame>img.thumbnail,
.media-list .thumb-frame>img.thumbnail,
.preview-block .thumb-frame>img.thumbnail {
    /* 絶対配置 + オブジェクトフィットで強制正方形のカバーを保証 */
    position: absolute !important;
    top: var(--thumb-padding) !important;
    left: var(--thumb-padding) !important;
    width: calc(100% - (2 * var(--thumb-padding))) !important;
    height: calc(100% - (2 * var(--thumb-padding))) !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* (Removed: preview-only 2-column enforcement between 362–595px; base grid handles it) */

/* (Removed: preview-only 160px min width at 362–416px to align with item page min widths) */

/* (Removed: preview-only 3-column enforcement between 596–971px; base grid handles it) */

/* Sticky footer rules were temporarily removed to investigate layout width issue */

/* =============================================================
   Mirador isolation
   - Do not apply global gradient/button overrides inside the IIIF Mirador viewer
   - Mirador root container id is .viewer (from iiif-viewer/index.phtml)
   ============================================================= */

.viewer button,
.viewer .button,
.viewer [type=submit],
.viewer .primary.button {
    background: initial;
    background-image: none;
    color: inherit;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Provide minimal hover focus states inside Mirador without overriding its own stylesheet */
.viewer button:hover,
.viewer button:focus,
.viewer .button:hover,
.viewer .button:focus {
    filter: none;
    box-shadow: none;
}

/* If Mirador needs a neutral button look but baseline accessibility focus outline: */
.viewer button:focus-visible,
.viewer .button:focus-visible {
    outline: 2px solid #666;
    outline-offset: 2px;
}

/* -------------------------------------------------------------
   Mirador additional isolation (Material-UI buttons)
   Some Mirador builds use MUI classes (MuiButtonBase-root / MuiIconButton-root)
   Foundation/app.css primary color (#1779ba) was bleeding in via generic rules.
   Force neutral transparent backgrounds while preserving icon color.
   ------------------------------------------------------------- */
.viewer .MuiButtonBase-root,
.viewer .MuiIconButton-root {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
}

/* Remove hover fill */
.viewer .MuiButtonBase-root:hover,
.viewer .MuiIconButton-root:hover {
    background: none !important;
    background-color: transparent !important;
}

/* Accessible focus ring (override MUI if suppressed) */
.viewer .MuiButtonBase-root:focus-visible,
.viewer .MuiIconButton-root:focus-visible {
    outline: 2px solid #666 !important;
    outline-offset: 2px;
}


/* =============================================================
    Groups layout (/item-set-group)
   - 240px fixed thumb column + description
   - Mobile: stack vertically
   ============================================================= */
body.groups-browse ul.groups-list {
    list-style: none;
    padding-left: 0;
}

.groups-browse .search-filters {
    display: none;
}

.groups-browse .groups-parent-description {
    margin: 28px 0 20px;
    color: var(--tulips-text);
    line-height: 1.7;
}

.resource-list.groups-list {
    border-top: 0;
}

body.groups-browse .groups-item {
    margin: 0 0 1.25rem 0;
}

body.groups-browse .groups-item .resource-name-row {
    margin-bottom: .35rem;
}

/* Heading-like title for groups list */
body.groups-browse .groups-item .resource-title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

body.groups-browse .groups-item .resource-title a {
    color: var(--tulips-link);
    text-decoration: none;
}

body.groups-browse .groups-item .resource-title a:hover,
body.groups-browse .groups-item .resource-title a:focus {
    color: var(--tulips-link-hover);
    text-decoration: none;
}

body.groups-browse .groups-item .groups-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1rem;
    align-items: start;
}

body.groups-browse .groups-item .groups-thumb {
    max-width: 240px;
}

body.groups-browse .groups-item .groups-thumb .thumb-frame {
    width: 240px !important;
    aspect-ratio: 1 / 1;
}

@media (max-width: 40em) {
    body.groups-browse .groups-item .groups-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Groups browse: temporary experiment to enlarge thumbnails to 360px
   - Keep original 240px rules above for fallback
   - Override only within groups-browse scope
   - If layout breaks, remove this block
   ============================================================= */
body.groups-browse .groups-item .groups-row {
    grid-template-columns: 360px 1fr;
}

body.groups-browse .groups-item .groups-thumb {
    max-width: 360px;
}

body.groups-browse .groups-item .groups-thumb .thumb-frame {
    width: 360px !important;
}

body.groups-browse .groups-item .groups-thumb .thumb-frame img.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.groups-pagination-bottom {
    font-size: inherit;
}

/* Standalone bottom pager for item and item-set browse (always visible) */
.browse-pagination-bottom {
    font-size: inherit;
    margin-top: .75rem;
}

.browse-pagination-bottom .omeka-pagination,
.browse-pagination-bottom nav.pagination {
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
}

@media print,
screen and (min-width: 40em) {
    .browse-pagination-bottom .omeka-pagination {
        width: auto !important;
        max-width: 100% !important;
        overflow: visible;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .browse-pagination-bottom {
        margin-top: .5rem;
    }
}

/*
.groups-pagination-bottom #pager-jump-input,
.groups-pagination-bottom .button {
    height: 1.9rem;
    line-height: 1.9rem;
    font-size: 12.25px;
}
*/

@media (max-width: 40em) {
    body.groups-browse .groups-item .groups-row {
        grid-template-columns: 1fr;
    }

    body.groups-browse .groups-item .groups-thumb,
    body.groups-browse .groups-item .groups-thumb .thumb-frame {
        width: 100% !important;
        max-width: 100%;
    }
}

/* =============================================================
   User bar (admin / login status) styling reapply
   ============================================================= */
#user-bar {
    background: linear-gradient(135deg, var(--tulips-primary), var(--tulips-primary-accent));
    color: #fff;
    font-size: 18px;
    padding: .25rem .75rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    justify-content: space-between;
}

#user-bar a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    margin: 12px;
}

#user-bar a:hover,
#user-bar a:focus {
    text-decoration: underline;
    color: #fff;
}

#user-bar .logout a,
#user-bar .login a {
    padding: .2rem .55rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--tulips-radius-sm);
    background: rgba(255, 255, 255, .12);
    transition: background .15s, border-color .15s;
}

#user-bar .logout a:hover,
#user-bar .login a:hover,
#user-bar .logout a:focus,
#user-bar .login a:focus {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .8);
}

@media (max-width: 640px) {
    #user-bar {
        flex-wrap: wrap;
        font-size: 13px;
        gap: 0;
    }

    #user-bar a {
        margin: 0 6px;
    }

    footer {
        margin: 0;
    }
}

/* =============================================================
   Tablet portrait: keep browse-controls on a single line
   - Prevent wrapping and gently constrain select width
   - Push Advanced search to the right to use space efficiently
   ============================================================= */
/* (Removed older portrait-tablet-only flex rules; grid layout (>=640px) applies) */

/* =============================================================
   From smartphone landscape and up (>= 640px):
   - Row 1: pagination (left) + sorting (right)
   - Row 2: advanced search link (right)
   - Reset sorting select width to default (no max-width)
   ============================================================= */
/* Desktop-ish layout kicks in from 1024px (>= 64em) */
@media screen and (min-width: 64em) {
    .browse-controls {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        grid-template-areas:
            "pagination sorting"
            ". advanced";
        gap: .5rem .75rem;
        align-items: center;
    }

    .browse-controls .pagination {
        grid-area: pagination;
        justify-self: start;
    }

    .browse-controls .sorting {
        grid-area: sorting;
        justify-self: end;
    }

    .browse-controls .advanced-search {
        grid-area: advanced;
        justify-self: end;
        width: auto;
        text-align: right;
    }

    /* Keep pagination in a single line; scroll horizontally if needed */
    .browse-controls .pagination,
    .browse-controls nav.pagination {
        white-space: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Reset sorting select width to default */
    .sorting select,
    .browse-controls .sorting select {
        max-width: none;
    }
}

/* Expand mobile toggle (Options) up to 1023px (<= 63.9375em) */
@media print,
screen and (max-width: 63.9375em) {
    .browse-control-mobile {
        display: block;
        /* override default.css display:none */
        float: right;
    }

    /* Hide controls by default, show when toggled */
    .browse-controls {
        margin: 0;
        display: none;
    }

    .browse-controls.open {
        display: flex;
        align-items: stretch;
    }
}

/* =============================================================
    Search form layout
    - Default: inline, containerに合わせて伸縮
    ============================================================= */
.search-form {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: nowrap;
    /* desktop default: keep single row */
}

.search-form--inline {
    width: 100%;
}

.search-form__input {
    flex: 1 1 auto;
    min-width: 180px;
    padding: .55rem .7rem;
    font-size: 1rem;
    margin: auto;
}

/* Inline header search: keep one line by default */
form.search-form.search-form--inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

form.search-form.search-form--inline .search-form__input {
    flex: 1 1 240px;
    min-width: 0;
}

.search-form__logic {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}

.search-form__logic-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    font-size: .9em;
    overflow-wrap: normal;
}

.search-form__logic input[type=radio] {
    margin: 0;
}

/* Base: Row2 (radios + button) should be horizontal */
.search-form__row2 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
}

/* When header collapses (approx.), allow wrapping for small screens */
@media (max-width: 720px) {
    form.search-form.search-form--inline {
        flex-wrap: wrap;
    }

    .search-form__logic {
        flex-basis: 100%;
        flex-wrap: wrap;
        column-gap: 12px;
        row-gap: 2px;
    }
}

/* Utility: hidden */
.u-hidden {
    display: none !important;
}

.search-form button {
    margin: 0;
    /* don't auto-center on desktop */
}

.search-form .multi-search-logic {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
    border: 0;
    align-items: flex-start;
}

.search-form .logic-option {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    white-space: nowrap;
    line-height: 1.3;
}

.search-form .logic-option input {
    margin: 0;
}

/* Visually disable OR radio */
.search-form .logic-option.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

.search-form .logic-option.is-disabled input[disabled] {
    cursor: not-allowed;
}

.search-form .logic-option.is-disabled:hover label,
.search-form .logic-option.is-disabled:hover {
    text-decoration: none !important;
}

.iiif-sc__search.search-form {
    max-width: clamp(260px, 70%, 760px);
}

/* Off-canvas search: two visual rows (+ advanced link)
   Row1: input only
   Row2: radios + submit (right-aligned, on the same line)
   Row3: advanced link (right, smaller)
   Desktop header search unaffected. */
#offCanvas .search .search-form {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

#offCanvas .search .search-form__input {
    min-width: 0 !important;
}

#offCanvas .search .search-form__logic {
    margin: .25rem 0 0 0;
    white-space: nowrap;
    flex: 0 0 auto;
}


/* Hide advanced link by default (header inline); show only in off-canvas */
.search-form__advanced {
    display: none;
}

#offCanvas .search .search-form__advanced {
    display: flex;
}

/* Small phones (<= 416px, ~26em): ensure 2 columns on 375px/390px */
@media screen and (max-width: 26em) {

    .item.resource.browse ul.resources,
    .item-set.resource.browse ul.resources,
    .preview-block ul.resources {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
    }

    .item.resource.browse ul.resources>li,
    .item-set.resource.browse ul.resources>li,
    .preview-block ul.resources>li {
        min-width: 196px;
    }

    .item.resource.browse ul.resources .thumb-frame,
    .item-set.resource.browse ul.resources .thumb-frame,
    .preview-block ul.resources .thumb-frame {
        min-width: 160px;
    }
}

/* Off-canvas search: add mascot below the search form (all widths) */
#offCanvas .search::after {
    content: "";
    display: block;
    height: 100px;
    margin-top: .5rem;
    background-image: var(--offcanvas-mascot-image);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 100px;
    /* fix height to 100px */
}

/* =============================================================
   Mobile tweaks: carousel search width and thumbnail overflow
   ============================================================= */
@media (max-width: 640px) {
    /* Keep sidebar mascot visible also on small screens */

    /* When stacked vertically, add spacing between main and sidebar */
    .resource.show .main-with-sidebar+.right-sidebar {
        margin-top: 20px;
    }

    .resource.show .right-sidebar+.main-with-sidebar {
        margin-top: 20px;
    }

    /* On small screens, allow wrapping for all search forms */
    .search-form {
        flex-wrap: wrap;
    }

    /* Widen overlay carousel search on small screens */
    .iiif-sc__search.search-form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        flex-wrap: wrap !important;
    }

    .iiif-sc__search .search-form__input {
        min-width: 0 !important;
        /*    flex: 1 0 100% !important;*/
        /* take the full first row */
    }

    /* Push the controls (radios + button) to the right on the next row */
    .iiif-sc__search .multi-search-logic {
        margin-left: auto !important;
    }

    .iiif-sc__search.search-form button {
        /* reset auto margins from global rule and add small top/left spacing */
        margin: 0 !important;
    }

    /* Prevent item thumbnails from overlapping or overflowing */
    .media-list .media.resource .resource-link,
    .resource-grid .resource .resource-link,
    .resource-grid .resource .description {
        width: 100% !important;
    }

    .resource-grid .resource img.thumbnail,
    .resource-grid .resource .resource-link img,
    .media-list .resource-link img,
    .media-list img,
    .media-list a.thumbnail,
    .media-list .thumbnail {
        width: 100% !important;
        height: auto !important;
    }

    /* Preview block thumbnails responsive override */
    .preview-block .resource-grid .resource-image,
    .preview-block .resource-grid .resource-image a.thumbnail,
    .preview-block .resource-grid .resource-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* ---------------------------------------------------------
       Site title: keep on one line by shrinking font size
       - No wrap; scale down with viewport; ellipsis fallback
       --------------------------------------------------------- */
    h1.site-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.1;
        font-size: clamp(16px, 5.5vw, 28px);
        max-width: 100%;
        margin-right: 16px;
    }

    h1.site-title a {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
        max-width: 100%;
    }

    h1.site-title .site-title-label {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Increase metadata value font size on smartphone for item-set item browse */
    .item.resource.browse.item-set .stack .property:nth-child(1) dd .value-content {
        font-size: 1.25rem;
    }
}