/* general */
@font-face {
  font-family: 'Satoshi';
  src:  url('/css/Satoshi-Variable.woff2') format('woff2');
}

:root {
  --text-main: #d57236;
  --text-bright: #d57236;
  --text-muted: #d57236;
}

*, body {
  font-family: Satoshi;
  font-weight: 300;
}

body {
  margin-top: 0;
  padding-top: 0;
}

a {
  color: inherit;
}

body > main {
  // for a-propos page
  min-height: 80vh;
}

body > footer {
  border-top: none;
}

h3 {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
  padding: 0;
}


/* utilities */

.hide {
  display: none;
}

/*  header and menu */

header {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
header.with-hero-image {
  height: 100vh;
}
header .header-top {
}
header .header-bottom {
  flex: 1;
  overflow: hidden;
}
header .header-spacer {
  height: 1rem;
  flex-shrink: 0;
}
header .header-bottom.hero-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

header .title-and-menu-link {
  display: flex;
  align-items: center;
  margin: 2rem 0 1rem 0;
  border-bottom: 1px solid var(--text-main);
}
header h1 {
  margin: 0;
}
header nav.menu-link {
  font-size: 2rem;
}
header nav.menu-link a {
  text-decoration: none;
}
header .title {
  flex: 1;
  text-align: left;
  margin: 0;
  padding: 0;
}
header .title svg {
  max-height: 2rem;
}
/* css rule for svg paths where fill is different from #FFFFFF */

header .title svg path:not([fill="#FFFFFF"]) {
  fill: var(--text-main);
}
header h2.page-title {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
  padding: 0;
}
header nav.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
header nav.menu h2 {
  font-size: inherit;
  margin: 0;
}
header nav.menu .nav-columns {
  columns: 3;
  margin-bottom: 3rem;
}
header nav.menu .menu-group {
  break-inside: avoid-column;
}
header nav.menu ul,
header nav.menu > a {
  display: block;
  margin-bottom: 1rem;
}
.a-propos {
  margin: 1rem 0 2rem 0;
}

/* medias display */

figure {
  margin: 0;
  text-align: center;
}
.photos-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
  margin-bottom: 3rem;
}
.photos-grid img {
  max-height: 90vh;
  object-fit: cover;
}
@media (min-width: 800px) {
  .photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* projets */

.projet-description {
  margin-top: 3rem;
}

/*
  force hide photoswipe stretched thumb while actual image loads because our thumbs have
  different aspect ratios than the actual images and that is not handled by photoswipe
 */
.pswp__img--placeholder {
  display: none !important;
}