/* =====================================================================
   Archivio Sonoro Franco Coggiola - Circolo Gianni Bosio
   Custom styles for the Freedom theme (pasted into CSS Editor, site "archivio").
   Colours set in the theme settings: Primary #B3121F, Secondary #141414,
   Accent #B3121F. Fonts are self-hosted: /cgb-assets/fonts.css
   (added in CSS Editor as an external stylesheet).
   ===================================================================== */

:root {
  --cgb-red: #B3121F;
  --cgb-ink: #141414;
  --cgb-muted: #5F5F5F;
  --cgb-paper: #FFFFFF;
  --cgb-grey: #F2F2F0;
  --cgb-line: #DADAD6;
  --cgb-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cgb-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---- Typography ---------------------------------------------------- */
body {
  font-family: var(--cgb-serif);
  color: var(--cgb-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6,
.main-header__site-title a,
.main-navigation, .main-header__advanced-search,
button, input, select, optgroup, textarea, label, legend,
.main-footer, .breadcrumbs, .pagination, .browse-controls {
  font-family: var(--cgb-sans);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

/* Page titles: short red rule underneath */
#content > h2:first-child::after,
#content > h1:first-child::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: .6rem;
  background: var(--cgb-red);
}

/* ---- Header -------------------------------------------------------- */
.main-header__site-title a {
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);   /* keep the site title on one line on desktop */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cgb-ink);
}
.main-navigation a { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---- Links --------------------------------------------------------- */
#content a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
#content a:hover { text-decoration-thickness: 2px; }

/* ---- Result lists: light grey cards with a red edge on hover -------- */
.resources .resource {
  background: var(--cgb-grey);
  border-left: 4px solid transparent;
  padding: 1rem 1.25rem;
  transition: border-color .15s ease;
}
.resources .resource:hover { border-left-color: var(--cgb-red); }
.resources .resource .description { color: var(--cgb-muted); font-size: .95rem; }

/* ---- Item page: metadata labels in small caps sans ------------------ */
.metadata dt, .property h4, .property dt {
  font-family: var(--cgb-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
  color: var(--cgb-muted);
}

/* ---- Footer -------------------------------------------------------- */
.main-footer { font-size: .95rem; }
.main-footer a { color: #FFFFFF; }

/* ---- Header: hide Freedom's hard-coded link to the core /item/search form.
   The AdvancedSearch module adds its own link to /find below the search box. */
.main-header__advanced-search { display: none; }

/* ---- Language badges ("it") next to values: everything is Italian at launch (D2),
   so the badge adds noise. Remove this rule when the English layer (@en) goes live. */
#content .value .language { display: none; }

/* ---- Pages: lead paragraph and call-to-action buttons (Home) ------- */
.cgb-lead { font-size: 1.35rem; line-height: 1.45; font-family: var(--cgb-sans); font-weight: 500; }
.cgb-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
#content a.cgb-btn {
  display: inline-block; padding: .75rem 1.25rem;
  font-family: var(--cgb-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--cgb-red); color: #FFFFFF; text-decoration: none; border: 2px solid var(--cgb-red);
}
#content a.cgb-btn:hover { background: #8E0E19; border-color: #8E0E19; }
#content a.cgb-btn--ghost { background: transparent; color: var(--cgb-red); }
#content a.cgb-btn--ghost:hover { background: var(--cgb-red); color: #FFFFFF; }

/* ---- Search results (AdvancedSearch 3.4.65 markup: ul.search-result-list > li.resource
   > .resource-heading / .resource-body > .description + dl.properties) --------- */
.search-result-list .resource { background: var(--cgb-grey); border-left: 4px solid transparent;
  padding: 1rem 1.25rem; margin-bottom: .75rem; list-style: none; transition: border-color .15s ease; }
.search-result-list .resource:hover { border-left-color: var(--cgb-red); }
.search-result-list .resource .description {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--cgb-muted); font-size: .95rem; margin: .4rem 0 .6rem;
}
.search-result-list dl.properties { margin: 0; font-size: .92rem; }
/* hanging indent: label in a 12rem left column, values flow inline to its right */
.search-result-list dl.properties .property { position: relative; padding-left: 12.5rem; margin: .2rem 0; }
.search-result-list dl.properties dt { position: absolute; left: 0; top: .15rem; width: 12rem; font-family: var(--cgb-sans);
  text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--cgb-muted); }
.search-result-list dl.properties dd,
.search-result-list dl.properties dd > * { display: inline; margin: 0; }
.search-result-list dl.properties dd:not(:last-of-type)::after { content: "; "; }   /* several values on one line */
.search-result-list dl.properties dd::after { display: inline !important; clear: none; }   /* theme clearfix sets ::after to display:table */
@media (max-width: 640px) {
  .search-result-list dl.properties .property { padding-left: 0; }
  .search-result-list dl.properties dt { position: static; display: block; width: auto; }
}

/* ---- Item page: hide the theme's "Collezione" block (item sets). The same information is
   already in "È parte di" (dcterms:isPartOf) and in the "Gerarchie" tree just below. */
#content .item-sets { display: none; }
/* =====================================================================
   Round 2 (2026-10-20): header, search form, facets
   ===================================================================== */

/* ---- Header: one-line title, slim search strip ---------------------- */
.main-header__site-title { max-width: none; flex: 1 1 auto; }
.main-header__site-title a { white-space: nowrap; }
.main-header__top-bar { padding: 6px 30px; min-height: 0; justify-content: flex-end; align-items: center; }
.main-header__top-bar .main-header__search-form { height: auto; }
.main-header__search-form form { display: flex; align-items: center; margin: 0; }
.main-header__search-form input[type="search"] { height: 34px; padding: 4px 10px; font-size: .9rem; width: 16rem; border: 1px solid var(--cgb-line); }
.main-header__search-form .search-submit { height: 34px; width: 34px; padding: 0; }
.main-header hr.alignfull { margin: 0; border-color: var(--cgb-line); }
@media (max-width: 900px) { .main-header__site-title a { white-space: normal; } }

/* ---- Search form (/find): one grid, every control the same height --- */
#content form.search-form > fieldset.search-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 1.25rem;
  border: 0; padding: 1.25rem; margin: 0 0 1rem; background: var(--cgb-grey);
}
#content form.search-form .field { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
#content form.search-form .field label { font-family: var(--cgb-sans); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cgb-muted); }
#content form.search-form input[type="text"],
#content form.search-form input[type="search"],
#content form.search-form select,
#content form.search-form .chosen-container .chosen-single,
#content form.search-form .chosen-container-multi .chosen-choices {
  box-sizing: border-box; width: 100% !important; min-height: 44px; height: 44px; padding: 0 12px; font-size: 1rem;
  border: 1px solid var(--cgb-line); border-radius: 0; background: #FFFFFF; box-shadow: none; line-height: 42px;
}
#content form.search-form .chosen-container { width: 100% !important; }
#content form.search-form .chosen-container-multi .chosen-choices { height: auto; display: flex; flex-wrap: wrap; align-items: center; }
#content form.search-form .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  height: 42px !important; border: 0; margin: 0; padding: 0; font-family: inherit; font-size: 1rem; color: var(--cgb-muted);
}
#content form.search-form .search-form-buttons { margin: 0 0 2rem; }
#content form.search-form .search-form-buttons .search-submit { height: 44px; padding: 0 2rem; }

/* ---- Facets panel (left column) ------------------------------------ */
.facets > h3 { font-size: 1.4rem; margin: 0 0 .75rem; }
.facets h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cgb-muted);
  margin: 1.5rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--cgb-line); }
.facets .facets-actions { display: flex; gap: .5rem; margin: 0 0 .5rem; }
.facets .facets-actions .button { flex: 1 1 0; height: 40px; padding: 0 .5rem; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.facets .facets-actions .facets-reset { background: transparent; color: var(--cgb-red); border: 2px solid var(--cgb-red); }
.facets .facets-actions .facets-reset:hover { background: var(--cgb-red); color: #FFFFFF; }
.facets .facets-actions .facets-apply { border: 2px solid var(--cgb-red); }
.facets input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { box-sizing: border-box; width: 100%; height: 40px;
  border: 1px solid var(--cgb-line); padding: 0 10px; }
.facets .facet-see-more-or-less { background: none; border: 0; padding: .25rem 0; color: var(--cgb-red);
  font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }

/* Less air between the (fixed) header and the page title. Freedom sets body padding-top
   from the header height in JS, so the slimmer header already removes most of the gap. */
#content { padding-top: 2rem; }

/* 2026-10-24: no thumbnails next to the collections in "Fa parte di" (the item set took the first item's media as its picture). */
#content dd.value.resource.item_sets .resource-link img { display: none; }