/* Top navigation bar shared by index.html and fontsinuse.html */
.topnav {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: max-content;
  margin-bottom: 70px;
}
.topnav__group {
  display: flex;
  gap: 4px;
}
a.topnav__btn {
  display: inline-block;
  padding: 7px 16px;
  background: var(--secondary_text_color, #EFEFEF);
  color: black;
  font-family: 'Ufficio';
  font-size: 10pt;
  font-weight: 450;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
a.topnav__btn:hover {
    background: #d4d4d4;
    color: #000000;

}
/* "Giulia B." button: black, expands over the next buttons on hover */
.topnav__bio {
  position: relative;
  display: inline-block;
  padding: 7px 16px;
  font-family: 'Ufficio';
  font-size: 10pt;
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.topnav__bio-ghost {
  visibility: hidden;
}
.topnav__bio-full {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  padding: 7px 16px;
  background: black;
  color: white;
  white-space: nowrap;
}
.topnav__bio-more {
  display: none;
}
.topnav__bio-more a {
  color: white;
  font-size: inherit;
  text-decoration: underline;
}
.topnav__bio--expandable:hover .topnav__bio-full {
  width: 40vw;
  white-space: normal;
}
.topnav__bio--expandable:hover .topnav__bio-more {
  display: inline;
  animation: topnavFade .4s;
}
@keyframes topnavFade {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Fontdue cart button (shop pages) styled like the other buttons */
.topnav .topnav__cart button.cart-button {
  display: inline-block;
  margin: 0;
  padding: 7px 16px;
  border: none;
  border-radius: 0;
  background: var(--secondary_text_color, #EFEFEF);
  color: black;
  font-family: 'Ufficio';
  font-size: 10pt;
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.topnav .topnav__cart button.cart-button:hover {
  background: #d4d4d4;
}
/* font page: back arrow + font name in darker grey */
a.topnav__btn--dark,
a.topnav__btn--dark:hover {
  background: #b3b3b3;
}
/* font page: Fontdue buy button as a green nav button */
.topnav .topnav__buy button.buy-button {
  display: inline-block;
  margin: 0;
  padding: 7px 16px;
  border: none;
  border-radius: 0;
  background: var(--cart_indicator_color, #6CF94A);
  color: black;
  font-family: 'Ufficio';
  font-size: 10pt;
  font-weight: 450;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.topnav .topnav__buy button.buy-button:hover {
  filter: brightness(0.92);
}
/* font page sections the nav scrolls to: stop below the fixed nav */
.collection-description,
.charset-panel,
.collection-languages {
  scroll-margin-top: 110px;
}
/* spacer for the fixed desktop nav where body padding can't be used (shop) */
.topnav-spacer {
  display: none;
}

/* Mobile: all buttons flow together and wrap; bio opens full width */
@media (max-width: 640px) {
  .topnav {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    margin-bottom: 30px;
  }
  .topnav__group {
    display: contents;
  }
  a.topnav__btn,
  .topnav .topnav__cart button.cart-button,
  .topnav .topnav__buy button.buy-button,
  .topnav__bio,
  .topnav__bio-full {
    padding: 9px 12px;
  }
  .topnav__bio--expandable:hover .topnav__bio-full {
    width: calc(100vw - 2vh);
  }
  /* font page: product buttons go after Get in Touch / Information / Cart */
  .topnav__group--product > * {
    order: 2;
  }
  /* line break so the product buttons always start on their own row */
  .topnav:has(.topnav__group--product)::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }
  .topnav a.topnav__btn--desktop {
    display: none;
  }
  /* font page: BUY as a full-width bar fixed to the bottom of the screen */
  .topnav .topnav__buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
  }
  .topnav .topnav__buy button.buy-button {
    display: block;
    width: 100%;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  /* keep the end of the page clear of the fixed BUY bar */
  body:has(.topnav__buy) {
    padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  }
}

/* Desktop: nav stays fixed at the top; content scrolls underneath.
   Body padding reserves the space the nav used to take
   (30px bar + 70px gap). */
@media (min-width: 641px) {
  .topnav {
    position: fixed;
    top: 1vh;
    left: 1vh;
    right: 1vh;
    margin-bottom: 0;
  }
  .topnav-spacer {
    display: block;
    height: 100px;
  }
  body:has(> .topnav) {
    padding-top: calc(1vh + 100px);
    height: calc(98vh - 100px);
  }
}