/* ====================================================================
   Radboud Collections · Omeka S Theme Overrides (Default theme)
   Mirador-tuned version
   --------------------------------------------------------------------
   Author: Ruud (Metadata Specialist, Radboud University)
   File:   radboud-theme-overrides.css
   Updated: 08 Oct 2025
   --------------------------------------------------------------------*/

/* ==================================================================== */
/* 0) ROOT VARIABLES                                                    */
/* ==================================================================== */

:root {
  /* Layout widths / gutters */
  --max-width-wide:     1700px;
  --max-width-medium:   1500px;
  --gutter-wide:          60px;
  --gutter-medium:        48px;
  --gutter-narrow:        32px;

  /* Mirador sizing */
  --mirador-min-h:       750px;
  --mirador-ideal-h:      90vh;     /* fallback for older browsers */
  --mirador-ideal-h-dvh:  90dvh;    /* modern mobile (avoids URL bar jump) */
  --mirador-max-h:      1200px;
  --header-h:             64px;
  --mirador-gap:          30px;
  --mirador-thumb-h:      100px;    /* consistent thumbnail strip height */
  --mirador-toolbar-h:     44px;    /* compact top toolbar target */

  /* Typography */
  --font-base:             16px;
  --line-base:             1.5;

  --font-title-max:        32px;
  --font-title-mid:        26px;
  --font-title-mobile:     24px;

  --font-meta-label:       16px;
  --font-meta-value:       16px;
  --color-meta-label:   #920b0b;
  --color-meta-value:   #555555;

  --font-nav:              1rem;
}

/* ==================================================================== */
/* 1) GLOBAL RESET + BASE TYPOGRAPHY                                    */
/* ==================================================================== */

html { box-sizing: border-box; font-size: var(--font-base); }
*, *::before, *::after { box-sizing: inherit; }

body {
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#content,
.o-body,
.page,
.blocks,
.blocks p,
.blocks li { font-size: 1rem; }

/* ==================================================================== */
/* 2) LAYOUT CONTAINERS (DESKTOP 800px+)                                */
/* ==================================================================== */

@media (min-width: 800px) {
  header, header nav { margin: 0 !important; padding: 0 !important; }

  .navigation {
    max-width: var(--max-width-wide);
    padding-left: var(--gutter-wide) !important;
    padding-right: var(--gutter-wide) !important;
    margin: 0 auto;
  }

  body.item.resource.show.body-truncate-full #content {
    max-width: var(--max-width-wide);
    padding-left: var(--gutter-wide) !important;
    padding-right: var(--gutter-wide) !important;
    margin: 0 auto;
    align-items: stretch !important;
  }
}

/* ==================================================================== */
/* 3) MIRADOR VIEWER                                                    */
/* ==================================================================== */
/* Key goals:
   - Fill viewport on desktop (minus header and a small gap)
   - Robust height on mobile using dvh; fallback to vh
   - Prevent inner scrollbars and clipping in Omeka Grid blocks
   - Keep Mirador tool popovers visible
*/

[id^="mirador-"],
.mirador-viewer,
.mirador,
.mirador .mirador-workspace,
.mirador .mirador-workspace-viewport,
.mirador .mirador-window,
.mirador .MuiPaper-root {
  /* Allow the viewer to expand without nested scroll traps */
  min-height: 0 !important;
}

@media (min-width: 800px) {
  body.item.resource.show.body-truncate-full [id^="mirador-"] {
    /* Prefer device viewport units to avoid mobile browser UI jitter */
    height: calc(100dvh - var(--header-h) - var(--mirador-gap)) !important;
    height: calc(100vh  - var(--header-h) - var(--mirador-gap)) !important; /* fallback */
    width: 100% !important;
    margin: 0 0 var(--mirador-gap) 0 !important;
    overflow: visible !important;
  }
}

/* Mobile & small tablets */
@media (max-width: 799px) {
  body.item.resource.show.body-truncate-full [id^="mirador-"] {
    height: clamp(var(--mirador-min-h), var(--mirador-ideal-h-dvh), var(--mirador-max-h)) !important;
    height: clamp(var(--mirador-min-h), var(--mirador-ideal-h),     var(--mirador-max-h)) !important; /* fallback */
    width: 100% !important;
    margin: 0 0 var(--mirador-gap) 0 !important;
    overflow: visible !important;
  }
}

/* If Mirador is inside Grid blocks, avoid clipping of tooltips/popovers */
.block-layout.grid .block [id^="mirador-"] { overflow: visible !important; }
.block-layout.grid .block { overflow: visible !important; }
[id^="mirador-"] { position: relative; z-index: 2; }

/* Make Mirador itself prefer using its container height instead of adding inner scrollbars */
.mirador .mirador-workspace,
.mirador .mirador-window-viewport,
.mirador .mirador-canvas-panel {
  height: 100% !important;
}

/* Compact toolbar and ensure it doesn’t eat too much vertical space */
.mirador .mirador-window-top-bar,
.mui-root .mirador-window-top-bar,
.mirador .MuiToolbar-root {
  min-height: var(--mirador-toolbar-h) !important;
  height: var(--mirador-toolbar-h) !important;
}

/* Consistent thumbnail strip height (bottom or side) */
.mirador .mirador-thumbnail-navigation,
.mirador .mirador-thumbnail-navigation .mirador-thumb {
  height: var(--mirador-thumb-h) !important;
}

/* Avoid double scrollbars on page + viewer */
body.item.resource.show.body-truncate-full #content {
  overflow: visible !important;
}

/* Smooth fullscreen handling */
.mirador:fullscreen,
[id^="mirador-"]:fullscreen {
  width: 100vw !important;
  height: 100dvh !important;
}

/* ==================================================================== */
/* 4) METADATA BLOCK (TABLE-LIKE GRID, NO VERTICAL GAPS)                */
/* ==================================================================== */

@media (min-width: 800px) {
  body.item.resource.show.body-truncate-full #content dl {
    background: #e3e3e3 !important;
    padding: 20px !important;
    margin: 20px auto !important;
    max-width: var(--max-width-wide) !important;
  }

  body.item.resource.show.body-truncate-full #content dl .property {
    display: grid !important;
    grid-template-columns: 200px 1fr;
    gap: 0 !important;
  }

  body.item.resource.show.body-truncate-full #content dl .property dt {
    font-size: var(--font-meta-label) !important;
    color: var(--color-meta-label) !important;
    font-weight: bold !important;
    grid-row: 1 / -1 !important;
    padding: 2px !important;
    margin: 0 !important;
  }

  body.item.resource.show.body-truncate-full #content dl .property dd {
    font-size: var(--font-meta-value) !important;
    color: var(--color-meta-value) !important;
    line-height: 1.4 !important;
    grid-column: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.item.resource.show.body-truncate-full #content dl .property dd a {
    color: blue !important;
    text-decoration: underline;
  }
}

/* ==================================================================== */
/* 5) HEADINGS & TITLES                                                 */
/* ==================================================================== */

@media (min-width: 1200px) {
  h1,
  .site-title,
  .resource-title,
  .page-title,
  h2 span.title,
  span.title,
  .o-title {
    font-size: var(--font-title-mid) !important;
    line-height: 1.25;
  }
}

@media (min-width: 800px) and (max-width: 1199px) {
  h1,
  .site-title,
  .resource-title,
  .page-title,
  .o-title {
    font-size: clamp(var(--font-title-mobile), 4vw, var(--font-title-max)) !important;
    line-height: 1.25;
  }
}

@media (max-width: 799px) {
  h1,
  .page-title,
  .o-title { line-height: 1.25; }
}

.resource-title a,
.o-title a { text-decoration: none; }

/* ==================================================================== */
/* 6) NAVIGATION TYPOGRAPHY                                             */
/* ==================================================================== */

header nav a,
.navigation a { font-size: var(--font-nav); }

/* ==================================================================== */
/* 7) BREAKPOINTS – MID DESKTOP (800–1199 px)                           */
/* ==================================================================== */

@media (min-width: 800px) and (max-width: 1199px) {
  .navigation,
  body.item.resource.show.body-truncate-full #content dl {
    max-width: 100%;
    padding-left: var(--gutter-narrow);
    padding-right: var(--gutter-narrow);
  }

  body.item.resource.show.body-truncate-full #content dl .property {
    grid-template-columns: 1fr;
  }
  body.item.resource.show.body-truncate-full #content dl .property dt,
  body.item.resource.show.body-truncate-full #content dl .property dd {
    grid-column: 1;
  }
}

/* ==================================================================== */
/* 8) HOMEPAGE BANNER FULL-BLEED                                        */
/* ==================================================================== */

.home-banner {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.home-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================================== */
/* 9) Push entire page content down below header/search  */
/* ==================================================================== */

/* Applies to item pages, site pages, and browse pages */
body:not(.home) #content,
body.page #content,
body.item.resource.show #content {
  padding-top: 20px !important;   /* adjust value as needed */
}

/* Optional smaller offset on mobile */
@media (max-width: 799px) {
  body:not(.home) #content,
  body.page #content,
  body.item.resource.show #content {
    padding-top: 10px !important;
  }
}

/* ==================================================================== */