/* One navigation component: photo pages, utility pages and the mobile menu.
   Variables select the contrast; later overrides must not turn every page white. */
body.nb-editorial-experience {
  --nb-editorial-header-height: 135px;
  --nb-header-color: #fff;
  --nb-header-background: transparent;
  --nb-header-logo-filter: brightness(0) invert(1);
}

body.nb-editorial-content { --nb-editorial-header-height: 100px; }
body.nb-editorial-content #page { padding-top: var(--nb-editorial-header-height); }
body.nb-editorial-content:not(.page-template-template-contact) {
  --nb-header-color: #171717;
  --nb-header-background: #f4f5f5;
  --nb-header-logo-filter: brightness(0);
}

.nb-editorial-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nb-editorial-header-height);
  transition: top .2s ease;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding: 0 40px;
  color: var(--nb-header-color);
  background: var(--nb-header-background);
  box-shadow: none;
  /* A transform/filter here would trap the fixed mobile menu inside the header. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.admin-bar .nb-editorial-header { top: 32px; }
.nb-editorial-header.is-hidden {
  top: calc(-1 * (var(--nb-editorial-header-height) + 48px)) !important;
  pointer-events: none;
}

.nb-editorial-header a,
.nb-editorial-header button,
.nb-editorial-header .nb-desktop-topbar__bag {
  color: inherit;
  font: 900 17px/1.05 var(--nb-editorial-heavy);
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
body.nb-editorial-experience .nb-editorial-header :is(a,button,.nb-desktop-topbar__bag) { color: var(--nb-header-color); }
.nb-editorial-header a { display: block; padding: 12px 0; }
.nb-editorial-header a:hover,
.nb-editorial-header a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.nb-editorial-header__brand { flex: 0 0 220px; }
.nb-editorial-header__brand img.custom-logo {
  display: block;
  width: 220px;
  height: auto;
  max-height: none;
  filter: var(--nb-header-logo-filter);
}
.nb-editorial-navigation { flex: 1; }
.nb-editorial-menu {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nb-editorial-menu a { white-space: nowrap; }
.nb-editorial-menu__home,
.nb-editorial-menu-toggle { display: none; }
.nb-editorial-header__bag { flex-shrink: 0; white-space: nowrap; }
.nb-editorial-header__bag .nb-desktop-topbar__bag { padding: 12px 0; }
.nb-editorial-header button.nb-editorial-menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

@media (min-width: 922px) and (max-width: 1150px) {
  .nb-editorial-header { padding: 0 24px; gap: 24px; }
  .nb-editorial-header__brand { flex-basis: 180px; }
  .nb-editorial-header__brand img.custom-logo { width: 180px; }
  .nb-editorial-header a { font-size: 14px; }
  .nb-editorial-menu { gap: 18px; }
}

@media (max-width: 921px) {
  body.nb-editorial-experience { --nb-editorial-header-height: 74px; }
  .nb-editorial-header { padding: 0 16px; gap: 12px; }
  .nb-editorial-header__brand { flex: 0 1 auto; position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; }
  .nb-editorial-header__brand img.custom-logo { width: 156px; max-width: 40vw; }
  .nb-editorial-menu-toggle { display: block; z-index: 3; padding: 15px 0; font-size: 14px !important; cursor: pointer; }
  .nb-editorial-header__bag { margin-left: auto; z-index: 3; }
  .nb-editorial-header__bag .nb-desktop-topbar__bag { font-size: 14px; }
  .nb-editorial-navigation {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    padding: 90px 24px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #82919bc9;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transition: opacity .25s, visibility .25s;
    overflow-y: auto;
    z-index: 2;
  }
  .nb-editorial-navigation.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  body.nb-editorial-experience.nb-editorial-menu-open {
    overflow: hidden;
    --nb-header-color: #fff;
    --nb-header-background: transparent;
    --nb-header-logo-filter: brightness(0) invert(1);
  }
  .nb-editorial-menu { flex-direction: column; gap: 16px; }
  .nb-editorial-menu a { font: 900 22px/1.15 var(--nb-editorial-heavy); letter-spacing: -.055em; padding: 8px; }
  .nb-editorial-menu__home { display: block; }
}

@media (max-width: 380px) {
  .nb-editorial-header__brand img.custom-logo { width: 132px; }
  .nb-editorial-header__bag .nb-desktop-topbar__bag,
  .nb-editorial-header .nb-editorial-menu-toggle { font-size: 12px !important; }
}
@media (max-width: 782px) { body.admin-bar .nb-editorial-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .nb-editorial-header.is-scrolled { top: 0; } }

/* Legibility: a soft scrim over campaign photos at the top, then a solid bar once scrolled. */
body.nb-editorial-experience:not(.nb-editorial-content) .nb-editorial-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
  transition: opacity .2s ease;
}
body.nb-editorial-experience:not(.nb-editorial-menu-open) .nb-editorial-header.is-scrolled {
  --nb-header-color: #171717;
  --nb-header-background: #fff;
  --nb-header-logo-filter: brightness(0);
  border-bottom: 1px solid rgba(23, 23, 23, .08);
}
body.nb-editorial-experience:not(.nb-editorial-menu-open) .nb-editorial-header.is-scrolled::before { opacity: 0; }
.nb-editorial-header { transition: top .2s ease, background-color .2s ease, height .2s ease; }

/* Desktop grouping: brand left, collections together, info next to the bag. */
@media (min-width: 922px) {
  body.nb-editorial-experience:not(.nb-editorial-content) .nb-editorial-header.is-scrolled { height: 84px; }
  .nb-editorial-menu { justify-content: flex-start; gap: 28px; }
  .nb-editorial-menu__home + li { margin-left: auto; }
  .nb-editorial-menu > .nb-editorial-menu__aside { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-editorial-header,
  .nb-editorial-header::before { transition: none; }
}