/* The portfolio's global navigation, for pages that are not Webflow exports.

   The Webflow pages get this bar from irina-csapo.webflow.shared.*.css, which
   is 831KB and sets base rules on html, body, h1-h6, p, a, img, ul and
   section. A standalone page with its own design system cannot take that
   without being restyled from under it, so the rules the bar actually needs
   are reproduced here and nothing else. The values are taken from the shared
   stylesheet and checked against the rendered bar on a Webflow page: 70px
   tall, white, Albert Sans 700 at 17px in --midnight-blue, 1290px container.

   The class names are the ones Webflow uses, so the markup stays comparable
   with the rest of the site. The colours are literals rather than the site's
   custom properties, which do not exist outside the shared stylesheet.

   Two things are deliberately not reproduced. The parked "Product Design"
   dropdown is a plain link here, since the menu it would open lists Webflow
   case studies and is hidden sitewide anyway (see nav.css). And the mobile
   panel is driven by site-nav.js rather than jQuery plus four Webflow
   chunks. */

@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/albert-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/albert-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.navigation-2024 {
  --nav-ink: #000645;      /* --midnight-blue */
  --nav-accent: #ff0091;   /* --deep-pink */
  --nav-line: #cbd0df;     /* --grey-4 */
  --nav-bg: #fff;
  --nav-h: 70px;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--nav-h);
  padding: 20px 3%;
  border-bottom: .5px solid var(--nav-line);
  background-color: var(--nav-bg);
  box-sizing: border-box;
  font-family: "Albert Sans", sans-serif;
}

.navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1290px;
  margin-inline: auto;
}

.navigation-menu {
  display: flex;
  align-items: center;
  width: 100%;
}

.irina-csapo-logo {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  line-height: 0;
}

.irina-csapo-logo .logo-image {
  display: block;
  height: 22px;
  width: auto;
}

.nav-menu-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
}

.navigation-link-primary,
.nav-menu-3 .text-block-23 {
  color: var(--nav-ink);
  font-family: "Albert Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: color .35s;
}

.navigation-link-primary {
  margin-inline: 10px;
  padding-inline: 16px;
}

.navigation-link-primary:hover,
.nav-menu-3 .text-block-23:hover,
.navigation-link-primary:focus-visible,
.nav-menu-3 .text-block-23:focus-visible {
  color: var(--nav-accent);
}

/* The current page stays visible and pink, the same correction nav.css makes
   to the shared stylesheet, which otherwise hides it. */
.navigation-link-primary[aria-current="page"] {
  color: var(--nav-accent);
}

/* The hamburger only exists below the collapse breakpoint. */
.menu-button-4 {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 14px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
  box-sizing: border-box;
}

.menu-button-4:hover { color: var(--nav-accent); }
.menu-button-4 svg { display: block; width: 24px; height: 24px; }

/* data-collapse="medium" on the Webflow bar collapses at 991px. */
@media screen and (max-width: 991px) {
  .navigation-2024 { padding-inline: 24px; }

  .menu-button-4 { display: flex; }

  .nav-menu-3 {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    width: 100%;
    /* The bar is fixed, so the panel can be taller than what is left of the
       window. The links keep the site's generous 60px padding, which on a
       short phone adds up past the viewport, hence the scroll. */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    background: var(--nav-bg);
    border-bottom: .5px solid var(--nav-line);
  }

  .nav-menu-3[hidden] { display: none; }

  .navigation-link-primary,
  .nav-menu-3 .text-block-23 {
    width: 100%;
    margin-inline: 0;
    padding: 60px 0;
    border-bottom: 1px solid var(--nav-line);
    font-size: 30px;
    line-height: 40px;
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
  .navigation-link-primary,
  .nav-menu-3 .text-block-23 { font-size: 26px; line-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-link-primary,
  .nav-menu-3 .text-block-23 { transition: none; }
}