/* Black */
@font-face {
  font-family: 'Avenir Black';
  font-style: normal;
  font-weight: 700 900;
  src: url('/static/fonts/AvenirLTStd-Black.woff') format('woff');
}
/* Normal */
@font-face {
  font-family: 'Avenir Roman';
  font-style: normal;
  font-weight: 400 600;
  src: url('/static/fonts/AvenirLTStd-Roman.woff') format('woff');
}

/* Bulma custom */
:root {
  --bulma-primary-h: 231deg;
  --bulma-primary-s: 36%;
  --bulma-primary-l: 46%;
  --bulma-success-h: 114deg;
  --bulma-warning-h: 30deg;
  --bulma-warning-l: 63%;
  --bulma-danger-h: 0deg;
  --bulma-danger-l: 78%;
  --bulma-family-secondary: "Playfair Display", 'Times New Roman', serif;
  --bulma-family-primary: "Avenir Roman", Helvetica, arial, sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#wrapper {
  flex: 1;
}


/* Full width search form */
.search-form {
  width: 100%;
}

/* Nicer images in search results */
#search_photographs div.column span.image {
  border-radius: 2%;
  aspect-ratio: 1;
  width: 100%;
  max-height: 20vh;
  background-size: cover;
  background-position: center;
  background-color: #CCC;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

/* Allow cursor to be set as pointer */
.clickable {
  cursor: pointer;
}

/* Add a transparent background on element */
.has-background-transparent {
  border-bottom: solid 1px #eeeeee;
  background-color: transparent;
  color: white;
}

/* Add a white text on buttons */
.button.has-white-text {
  color: #ffffff !important;
}

/* Family setup */
.is-family-primary {
  font-family: var(--bulma-family-primary) !important;
}

.is-family-secondary {
  font-family: var(--bulma-family-secondary) !important;
}

.title {
  font-family: var(--bulma-family-secondary) !important;
}

/* Navbar : add a glassy mod */
.is-glassy,
.is-glassy * {
  box-sizing: border-box;
}

.is-glassy {
  /* prevent movement from apparition of the border */
  border: 1px solid transparent;
}
.is-glassy.navbar-dropdown,
.is-glassy:active,
.is-glassy:focus,
.is-glassy:visited,
.is-glassy:hover {
  background-color: #fff1 !important;
  backdrop-filter: blur(5px);
  border: 1px solid #353535;
  border-radius: 2px;
}

.is-glassy.navbar-dropdown  * {
  background-color: transparent !important;
}

.is-glassy.navbar-dropdown .navbar-item:hover {
  background-color: #35353588 !important;
}

/* Custom language switch */
.custom-language-switch .navbar-link {
  width: 50px;
  font-size: 1.3em;
  display: grid;
  place-items: center;
}

/* Home page */
.home-hero {
  inset: 0;
  background-image: url("../images/hero-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero .title.is-1 {
  font-size: 6em;
}

.is-custom-searchbar {
  --radius: 2px;
}

.is-custom-searchbar .input {
  background-color: #fff1;
  backdrop-filter: blur(5px);
  /* Never set 0.. always look bad */
  border-radius: var(--radius);
  border-color: #353535;
  max-width: 400px;
}

.is-custom-searchbar .control {
  width: 100% !important;
}

.is-custom-searchbar .button {
  background-color: #353535;
  border-radius: var(--radius);
  color: #fefefe;
}

/* Photograph details */
figure {
  text-align: center;
}
figure img {
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

/* Footer must be on top of hero */
footer.footer {
  z-index: 1000;
  background-color: #4e5ca6; /* Same as https://www.guimet.fr/fr */
  color: #ffffff;
  border-top: 1px solid #CCC;
}

footer.footer a {
  color: #ffffff;
  font-weight: 900;
  text-decoration: underline;
}

/* smaller photograph link */
.photograph-link img {
  max-height: 200px;
}

/* Bottom overlay */
.bottom-overlay {
  position: relative;
  overflow: hidden;
}

.bottom-overlay::after {
  opacity: 0;
}

.bottom-overlay.no-hover::after,
.bottom-overlay:hover::after {
  opacity: 1;
  content: attr(data-overlay-content);
  display: block;
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  background-color: #0005;
  backdrop-filter: blur(5px);
  padding: 8px;
  text-align: end;
  color: #fff;
}

/* horizontal scroll container */
.h-scroll {
  width: 100%;
  max-width: 100vw;
  overflow-x: scroll;
  padding-bottom: 16px; /* prevent the scrollbar to go on top of the images */
  white-space: nowrap;
}

.h-scroll-images {
  max-height: 200px;
  border-radius: 8px;
}

/* Photograph Metadata block on the left side */
#metadatas {
  padding: 8px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

/* Add a slight shadow behind tags */
#metadatas .tags {
  box-shadow: 0 5px 5px -2px #171b3a20;
  border-radius: var(--bulma-radius); /* not applied on top level tags */
}

/* Photograph viewer */
#iiif-viewer {
  height: 55dvh;
  background-color: #efefef;
}

/* Map */
#map {
  height: 75dvh;
  background-color: #eee;
  border-radius: 5px;
  border: 1px solid #aaa;
}

#map.small {
  height: 20dvh;
}

/* Search */

.facet_tag_light {
  background-color: #bcc6fa !important;
}

.facet_tag_medium {
  background-color: #4b58a0 !important;
}

.facet_tag_dark {
  background-color: #2d376f !important;
}

.facet {
  padding: 0.2em;
}

.active-facet {
  background-color: #0002;
  margin: 0;
  border-radius: var(--bulma-radius);
}

.active-facet .facet-tag-dark {
  background-color: #4e5371 !important;
}

/* Masonry */
.masonry {
  column-gap: 1rem;
}

/*
 * CSS magic that split the dom into columns automatically
 * See: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
 */
.masonry.columns-4 {
  columns: 4;
}

.masonry .item{
  margin: 0 1rem 1rem 0;
  width: 100%;
  background-color: #efefef;
  border-radius: var(--bulma-radius);
  box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
  /* Crop the content so we can see the border-radius */
  overflow: hidden;
}

/* Any element inside the item will fill his container and prevent his content to be deformed */
.masonry .item *{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Display text on multiple lines */
.has-text-wrap {
  white-space: pre-wrap;
}

/* Style categories list with tags */
section.category div.tags a {
  display: inline-block;
  font-size: 1.1rem;
  margin: 0 0.3em;
}

section.category div.tags a:hover {
  text-decoration: underline;
}

section.category div.tags a span.name{
  color: black !important;
}

section.category div.tags a span.count {
  color: #AAA !important;
  font-size: 0.8em;
}

#categories ul.menu-list li a.is-active {
  background-color: #4e5ca6; /* Same as https://www.guimet.fr/fr */
}

/* Custom slider */
/* The slider itself */
.slider {
  /* Define control variables using base bulma variables to match theme */
  --handle-color: var(--bulma-primary);
  --background-luminosity: var(--bulma-light-l);
  --background-color: hsl(var(--bulma-primary-h),var(--bulma-primary-s),var(--background-luminosity));
  --slider-handle-width: 5px;
  --handle-border: 1px hsl(var(--bulma-primary-h),var(--bulma-primary-s),var(--bulma-dark-l)) solid;

  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background-color: var(--background-color);
  background-image: url('/static/images/slider-texture.png');
  background-repeat: repeat-x;
  background-position: center;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  --background-luminosity: 80%;
  --slider-handle-width: 7px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: var(--slider-handle-width); /* Set a specific slider handle width */
  height: calc(var(--bulma-control-height) - 2px); /* Leave room for top/bottom borders */
  background: var(--handle-color); /* Green background */
  cursor: pointer; /* Cursor on hover */
  border: none;
  border-top: var(--handle-border);
  border-bottom: var(--handle-border);
  border-radius: 0;
}