/* Top bar: logo on the left; Instagram, LinkedIn and the language switch on the right (all screen sizes). */

.navbar-hero {
  flex-flow: column;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* Floats over the full-screen hero image; the hero's top shadow keeps it readable. */
.navbar-section {
  z-index: 10;
  width: 100%;
  padding: 30px var(--section-pad);
  position: absolute;
  top: 0;
  left: 0;
}

.navbar-block {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.logo-icon {
  max-width: 100%;
  display: inline-block;
  color: var(--color-text);
  font-size: var(--b2);
  text-decoration: none;
}

.navbar-social {
  gap: 20px;
  align-items: center;
  display: flex;
}

.navbar-social-link {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--color-teal);
  transition: opacity .3s var(--ease);
}

.navbar-social-link:hover { opacity: .6; }

.navbar-social-link svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The "in" is drawn in the page background colour so it reads as cut out of the square. */
.navbar-social-cutout { fill: var(--color-bg); }

/* Language switch (EN on the French page, FR on the English one): a solid square like LinkedIn's,
   with the letters cut out in the background colour. */
.navbar-lang text {
  fill: var(--color-bg);
  font-family: Geist, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .navbar-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .navbar-social { gap: 16px; }
  .navbar-social-link {
    width: 24px;
    height: 24px;
  }
}