/* =========================================================
   ACQUE, INFRASTRUTTURE E MEMORIA – archivio Augusto Rima
   Tema "idrometro": la testata è l'acqua del lago, i titoli
   hanno la scala graduata degli idrometri, le foto si
   "allagano" al passaggio del mouse.
   Per il tema Default di Omeka S. Incollare nel CSS Editor
   del sito. L'@import deve restare in cima.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Barlow:wght@500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap");

html:root {   /* "html" la rende più forte del colore impostato nelle opzioni del tema */
  --aq-deep: #0e2f3a;         /* acqua profonda del lago */
  --aq-water: #1f6f78;        /* acqua */
  --aq-shallow: #8fb8bd;      /* acqua bassa */
  --aq-paper: #eef2f1;        /* carta dei dossier */
  --aq-card: #f9fbfa;
  --aq-ink: #1b2a30;
  --aq-muted: #55666c;
  --aq-line: #c5d1d1;
  --aq-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --aq-label: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --aq-text: "Source Serif 4", Georgia, serif;

  /* variabili del tema Default */
  --accent: var(--aq-water);
  --bg: var(--aq-paper);
  --light: var(--aq-line);
}

body {
  background: var(--aq-paper);
  color: var(--aq-ink);
  font-family: var(--aq-text);
  font-size: 19px;
}

a:link,
a:visited {
  color: var(--aq-water);
}

/* ---------- testata: l'acqua ---------- */

header {
  background: linear-gradient(to bottom, var(--aq-deep) 0%, #15434f 100%);
  position: relative;
  margin-bottom: 72px;
  padding-bottom: 8px;
}

/* il bordo inferiore della testata è un'onda */
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -23px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 0 H120 V10 C100 22 80 22 60 10 C40 -2 20 -2 0 10 Z' fill='%23164552'/%3E%3C/svg%3E") repeat-x;
  background-size: 120px 24px;
  pointer-events: none;
}

/* il tema dipinge di bianco le fasce del titolo e del menu */
.site-title,
#top-nav,
.site-title::before,
#top-nav::before,
header nav .child-toggle {
  background-color: transparent !important;
}

#top-nav,
#top-nav::after {
  border: 0 !important;
  background: transparent !important;
}

h1.site-title {
  padding-top: 44px;
  padding-bottom: 6px;
}

h1.site-title a {
  font-family: var(--aq-head);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

/* sottotitolo sotto il nome della mostra */
h1.site-title a::after {
  content: "Archivio dell'ingegnere Augusto Rima · Locarno";
  display: block;
  margin-top: 10px;
  font-family: var(--aq-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aq-shallow);
}

header nav ul.navigation a:link,
header nav ul.navigation a:visited {
  font-family: var(--aq-label);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d6e6e7;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
}

header nav ul.navigation a:hover,
header nav ul.navigation .active > a {
  color: #fff;
  border-bottom-color: var(--aq-shallow);
}

@media screen and (min-width: 800px) {
  header nav ul.navigation {
    padding: 14px 0 10px;
  }
}

/* pulsante del menu su telefono, bianco sul fondo scuro */
#mobile-nav-toggle {
  color: #fff;
  background: transparent;
}

/* su desktop la ricerca va in alto a destra, dentro la fascia scura */
@media screen and (min-width: 800px) {
  #search {
    top: 28px;
    margin-top: 0;
  }
}

#search form {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

#search input[type="text"] {
  font-family: var(--aq-label);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
}

#search button {
  background: var(--aq-shallow);
  color: var(--aq-deep);
}

/* ---------- titoli con la scala dell'idrometro ---------- */

#content h2 {
  position: relative;
  padding-left: 30px;
  font-family: var(--aq-head);
  font-size: 50px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--aq-deep);
  margin-bottom: 34px;
}

/* asta graduata a sinistra del titolo */
#content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 14px;
  border-left: 3px solid var(--aq-water);
  background: repeating-linear-gradient(to bottom, var(--aq-water) 0 2px, transparent 2px 9px);
  background-size: 8px 100%;
  background-repeat: no-repeat;
}

#content h3 {
  font-family: var(--aq-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aq-muted);
}

/* ---------- pagine di testo ---------- */

.block-html {
  max-width: none;
}

.block-html p {
  font-size: 20px;
  line-height: 1.7;
}

/* primo paragrafo come un'introduzione, con il "livello dell'acqua" a sinistra */
.blocks .block-html:first-child p:first-of-type {
  padding-left: 22px;
  border-left: 4px solid var(--aq-shallow);
  font-size: 23px;
  line-height: 1.6;
  font-style: italic;
  color: var(--aq-deep);
}

/* ---------- elenchi di fotografie ---------- */

ul.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 40px 28px;
  margin: 40px 0;
}

ul.resource-list .resource,
ul.resource-list .resource:first-child,
ul.preview.resource-list li:first-of-type {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}

ul.resource-list .resource .resource-link {
  position: relative;
  display: block;
  text-decoration: none;
}

ul.resource-list .resource img {
  float: none;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 0 0 14px;
  object-fit: cover;
  border: 1px solid var(--aq-line);
  background: var(--aq-card);
}

/* l'acqua che sale sulla foto al passaggio del mouse */
ul.resource-list .resource .resource-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 4 / 3;
  background: linear-gradient(to top, rgba(14, 47, 58, 0.55) 0%, rgba(31, 111, 120, 0.25) 60%, rgba(31, 111, 120, 0) 100%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s ease;
  pointer-events: none;
}

ul.resource-list .resource:hover .resource-link::after,
ul.resource-list .resource:focus-within .resource-link::after {
  clip-path: inset(35% 0 0 0);
}

ul.resource-list .resource img ~ * {
  width: auto;
}

ul.resource-list .resource .resource-name {
  display: block;
  padding-top: 10px;
  border-top: 3px solid var(--aq-deep);
  font-family: var(--aq-head);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--aq-ink);
}

ul.resource-list .resource .description {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--aq-muted);
  max-height: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.body-truncate-fade ul.resource-list .resource .description::after {
  display: none;
}

ul.resource-list .resource:hover .resource-name {
  color: var(--aq-water);
}

.resource-list.preview + a {
  background: var(--aq-deep);
  color: #fff !important;
  border-radius: 0;
  padding: 10px 24px;
  font-family: var(--aq-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.resource-list.preview + a:hover {
  background: var(--aq-water);
}

/* ---------- pagina della collezione: la cartella del dossier ---------- */

body.item-set .metadata {
  position: relative;
  box-sizing: border-box;
  margin-top: 30px;
  padding: 28px;
  background: var(--aq-card);
  border: 1px solid var(--aq-line);
  border-top: 4px solid var(--aq-deep);
}

/* linguetta della cartella */
body.item-set .metadata::before {
  content: "Dossier";
  position: absolute;
  left: -1px;
  top: -32px;
  padding: 6px 18px;
  background: var(--aq-deep);
  color: #fff;
  font-family: var(--aq-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.item-set .metadata dt,
body.item.show #content dl dt {
  font-family: var(--aq-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aq-water);
}

body.item-set .metadata dd {
  margin: 4px 0 18px;
  font-size: 18px;
  line-height: 1.6;
}

.browse-controls select,
.browse-controls input,
.browse-controls button,
.pagination input,
.pagination a,
.pagination button {
  font-family: var(--aq-label);
  background-color: var(--aq-card);
  border-color: var(--aq-line);
}

/* ---------- pagina del singolo item: immagine fissa, metadati che scorrono ---------- */

@media screen and (min-width: 800px) {
  body.item.show #content {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 56px;
    align-items: start;
  }

  body.item.show #content > * {
    grid-column: 2;
  }

  body.item.show #content > .media-embeds {
    grid-column: 1;
    grid-row: 1 / span 50;
    position: sticky;
    top: 24px;
    align-self: start;
    margin: 0;
  }

  body.item.show #content > h2 {
    font-size: 38px;
    margin-top: 0;
  }
}

body.item.show #content > h2 + h3 {
  display: none;
}

body.item.show .media-embeds .media-render {
  background: var(--aq-card);
  border: 1px solid var(--aq-line);
  border-bottom: 6px solid var(--aq-deep);
  padding: 16px;
  margin-bottom: 24px;
}

body.item.show .media-embeds img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: contain;
}

body.item.show .media-embeds .openseadragon {
  height: calc(100vh - 100px) !important;
}

body.item.show #content dl .property {
  padding: 14px 0;
  border-bottom: 1px solid var(--aq-line);
}

body.item.show #content dl dd {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.55;
}

/* ---------- piè di pagina ---------- */

.site-page-pagination a {
  font-family: var(--aq-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

footer {
  font-family: var(--aq-label);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aq-muted);
  border-top: 1px solid var(--aq-line);
  padding-top: 18px;
}

/* ---------- Mirador non usato in questa mostra ---------- */

.mirador,
.mirador.viewer,
.block-mirador,
[id^="mirador-"],
.MuiDialog-root,
.MuiModal-root,
.MuiPopover-root,
.MuiBackdrop-root {
  display: none !important;
}

body {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* ---------- telefono ---------- */

@media screen and (max-width: 799px) {
  header { margin-bottom: 48px; }
  h1.site-title { padding-top: 20px; }
  h1.site-title a { font-size: 32px; }
  h1.site-title a::after { font-size: 11px; letter-spacing: 0.1em; }
  #content h2 { font-size: 34px; padding-left: 24px; }
  .block-html p { font-size: 18px; }
  .blocks .block-html:first-child p:first-of-type { font-size: 20px; }

  ul.resource-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 28px 16px;
  }

  body.item.show .media-embeds img { max-height: 70vh; }
  body.item.show .media-embeds .openseadragon { height: 60vh !important; }
}

@media (prefers-reduced-motion: reduce) {
  ul.resource-list .resource .resource-link::after { transition: none; }
}