/* Traiteur-only navigation material. The shared Journal/Home shells remain untouched. */
:root {
  --trt-nav-gap: 0.75rem;
  --trt-nav-height: 3.125rem;
  --trt-nav-control: 2.75rem;
  --trt-nav-radius: 1.625rem;
  --trt-nav-fill: rgba(251, 252, 251, 0.66);
  --trt-nav-fill-solid: rgba(251, 252, 251, 0.97);
  --trt-nav-border: rgba(255, 255, 255, 0.78);
  --trt-nav-contact: rgba(21, 24, 22, 0.11);
  --trt-nav-shadow: 0 1rem 2.8rem -1.05rem rgba(21, 24, 22, 0.3), inset 0 0.0625rem 0 rgba(255, 255, 255, 0.88);
  --trt-nav-shine-x: -18%;
  --trt-masthead-top: 0.2rem;
  --trt-masthead-mark: 3.35rem;
}

html {
  scroll-padding-top: 4.5rem;
  scroll-padding-bottom: calc(var(--trt-nav-height) + var(--trt-nav-gap) + env(safe-area-inset-bottom, 0px));
}

body.traiteur-page { padding-bottom: 0; }

.traiteur-page .footer {
  padding-bottom: calc(var(--space-8) + var(--trt-nav-height) + var(--trt-nav-gap) + var(--trt-nav-gap) + env(safe-area-inset-bottom, 0px));
}

.trt-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The identity stays separate from the navigation material. */
.trt-masthead {
  position: fixed;
  z-index: 1001;
  top: max(var(--trt-masthead-top), env(safe-area-inset-top, 0px));
  left: 50%;
  width: var(--trt-nav-control);
  height: var(--trt-nav-control);
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.trt-masthead a {
  width: var(--trt-nav-control);
  min-height: var(--trt-nav-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.trt-masthead .logo-wordmark { width: var(--trt-masthead-mark); }
.trt-masthead a:focus-visible { outline-color: currentColor; outline-offset: -0.18rem; }

/* One detached bottom glass surface at every viewport size. */
.site-nav {
  top: auto;
  right: auto;
  bottom: var(--trt-nav-gap);
  bottom: calc(var(--trt-nav-gap) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: max-content;
  max-width: calc(100% - var(--trt-nav-gap) - var(--trt-nav-gap) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  transform: translateX(-50%);
}

.nav-shell {
  position: relative;
  min-height: var(--trt-nav-height);
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem 0.25rem;
  isolation: isolate;
  overflow: hidden;
  clip-path: inset(0 round var(--trt-nav-radius));
  border: 0;
  border-radius: var(--trt-nav-radius);
  background: transparent;
  box-shadow: var(--trt-nav-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav-shell::before { display: none; content: none; }

.nav-shell > .nav-links,
.nav-shell > .nav-actions {
  position: relative;
  z-index: 3;
}

.trt-nav-optics {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0.0625rem solid var(--trt-nav-border);
  border-radius: inherit;
  background: var(--trt-nav-fill);
  box-shadow: inset 0 -0.0625rem 0 var(--trt-nav-contact), inset 0.0625rem 0.0625rem 0 rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.trt-nav-refract,
.trt-nav-tint,
.trt-nav-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.trt-nav-refract {
  z-index: 0;
  background: rgba(251, 252, 251, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.24);
  backdrop-filter: blur(14px) saturate(1.24);
}

@supports ((backdrop-filter: blur(2px) url("#trt-nav-lens")) or (-webkit-backdrop-filter: blur(2px) url("#trt-nav-lens"))) {
  .trt-nav-refract {
    -webkit-backdrop-filter: blur(14px) saturate(1.22) url("#trt-nav-lens");
    backdrop-filter: blur(14px) saturate(1.22) url("#trt-nav-lens");
  }
}

.trt-nav-tint {
  z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(251, 252, 251, 0.2));
  box-shadow: inset 0.075rem 0.075rem 0 rgba(255, 255, 255, 0.72), inset -0.075rem -0.075rem 0 rgba(21, 24, 22, 0.06);
}

.trt-nav-specular {
  z-index: 2;
  inset: -45% -22%;
  background:
    radial-gradient(circle at 36% 50%, rgba(255, 255, 255, 0.34) 0 4%, rgba(255, 255, 255, 0.11) 12%, transparent 29%),
    linear-gradient(112deg, transparent 35%, rgba(255, 255, 255, 0.05) 43%, rgba(255, 255, 255, 0.52) 50%, rgba(255, 255, 255, 0.08) 57%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.82;
  transform: translate3d(var(--trt-nav-shine-x), 0, 0);
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-links { gap: 0; }

.nav-links a,
.language-switch button,
.menu-toggle,
.order-nav {
  min-width: var(--trt-nav-control);
  min-height: var(--trt-nav-control);
  border-radius: calc(var(--trt-nav-control) / 2);
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.015em;
}

.nav-links a { padding-inline: var(--space-3); }
.nav-links a[aria-current="page"] { background: rgba(7, 63, 45, 0.075); }

.language-switch {
  min-height: var(--trt-nav-control);
  padding-left: var(--space-1);
}

.language-switch button { cursor: pointer; }

.order-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-3);
  color: var(--green);
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.order-nav:hover { background: rgba(7, 63, 45, 0.08); }
.order-nav:active { transform: scale(0.96); }

.nav-shell :is(a, button):focus-visible {
  outline: 0.13rem solid var(--green-hover);
  outline-offset: -0.2rem;
}

.menu-toggle {
  position: relative;
  width: var(--trt-nav-control);
  height: var(--trt-nav-control);
  padding: 0;
}

.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 0.075rem;
  margin: 0;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.menu-toggle span:nth-child(1) { transform: translate3d(-50%, -0.3rem, 0); }
.menu-toggle span:nth-child(2) { transform: translate3d(-50%, 0, 0); }
.menu-toggle span:nth-child(3) { transform: translate3d(-50%, 0.3rem, 0); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translate3d(-50%, 0, 0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translate3d(-50%, 0, 0) scaleX(0.25); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translate3d(-50%, 0, 0) rotate(-45deg); }

.mobile-panel {
  top: auto;
  bottom: calc(var(--trt-nav-height) + var(--trt-nav-gap) + var(--space-2) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100svh - var(--trt-nav-height) - var(--trt-nav-gap) - var(--space-12) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border-color: var(--trt-nav-border);
  border-radius: 1.25rem;
  background: rgba(251, 252, 251, 0.88);
  box-shadow: var(--trt-nav-shadow);
}

.mobile-panel > a {
  min-height: var(--trt-nav-control);
  font-size: 1.08rem;
}

.mobile-panel > a::after { content: none; }

.mobile-panel > .button-primary {
  margin: var(--space-3) var(--space-5) var(--space-5);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: calc(var(--trt-nav-control) / 2);
  background: var(--green);
  color: var(--white);
  font: 600 0.7rem/1 var(--mono);
}

.mobile-panel > .button-primary:hover { background: var(--green-hover); }

.mobile-panel .mobile-language {
  min-height: var(--trt-nav-control);
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-4);
  padding: 0;
  border: 0;
}

.mobile-panel .mobile-language button {
  min-width: var(--trt-nav-control);
  min-height: var(--trt-nav-control);
  border-radius: calc(var(--trt-nav-control) / 2);
  cursor: pointer;
}

@media (max-width: 72rem) {
  .nav-links a { padding-inline: var(--space-2); }
}

@media (max-width: 60rem) {
  :root {
    --trt-nav-gap: 0.65rem;
    --trt-nav-height: 3.125rem;
    --trt-masthead-top: 0.1rem;
    --trt-masthead-mark: 3.1rem;
  }

  html { scroll-padding-top: 4rem; }

  body.traiteur-page { padding-bottom: 0; }

  .site-nav {
    top: auto;
    right: 0;
    bottom: var(--trt-nav-gap);
    bottom: calc(var(--trt-nav-gap) + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: auto;
    max-width: none;
    display: flex;
    justify-content: center;
    padding-inline: max(var(--trt-nav-gap), env(safe-area-inset-left, 0px)) max(var(--trt-nav-gap), env(safe-area-inset-right, 0px));
    transform: none;
  }

  .nav-shell {
    width: max-content;
    max-width: 100%;
    min-height: var(--trt-nav-height);
    display: flex;
    grid-template-columns: none;
    gap: 0;
    padding: 0.1875rem 0.25rem;
    border-radius: var(--trt-nav-radius);
  }

  .nav-links { display: flex; }

  .nav-links a { display: none; }

  .nav-links a:first-child {
    min-width: 4.15rem;
    display: inline-flex;
    padding-inline: 0.8rem;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    justify-self: auto;
  }

  .nav-actions > .language-switch,
  .nav-actions > .order-nav { display: none; }

  .menu-toggle {
    display: block;
    border-left: 0.0625rem solid rgba(21, 24, 22, 0.12);
    border-radius: 0 calc(var(--trt-nav-control) / 2) calc(var(--trt-nav-control) / 2) 0;
  }

  .mobile-panel {
    top: auto;
    right: auto;
    bottom: calc(var(--trt-nav-height) + var(--trt-nav-gap) + var(--trt-nav-gap) + 0.25rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: min(calc(100% - var(--trt-nav-gap) - var(--trt-nav-gap)), 23rem);
    max-height: calc(100svh - var(--trt-nav-height) - var(--trt-nav-gap) - var(--space-12) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    transform: translate3d(-50%, var(--space-3), 0);
  }

  .mobile-panel[data-open="true"] { transform: translate3d(-50%, 0, 0); }

  .mobile-panel .mobile-language { display: flex; }

  html:not(.js) body.traiteur-page .nav-shell {
    max-width: calc(100vw - var(--trt-nav-gap) - var(--trt-nav-gap));
    overflow-x: auto;
  }

  html:not(.js) body.traiteur-page .nav-links a { display: inline-flex; }
  html:not(.js) body.traiteur-page .nav-actions > .language-switch { display: flex; }
  html:not(.js) body.traiteur-page .nav-actions > .order-nav { display: inline-flex; }
  html:not(.js) body.traiteur-page .menu-toggle { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trt-nav-optics,
  .mobile-panel {
    background: var(--trt-nav-fill-solid);
    border-color: var(--line-strong);
  }

  .trt-nav-refract { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .trt-nav-optics,
  .mobile-panel {
    background: var(--trt-nav-fill-solid);
    border-color: var(--line-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .trt-nav-refract { display: none; }
  .trt-nav-specular { display: none; }
}

@media (prefers-contrast: more) {
  .trt-nav-optics,
  .mobile-panel { border-color: currentColor; }
}

@media (forced-colors: active) {
  .trt-masthead { color: CanvasText; mix-blend-mode: normal; }
  .trt-nav-optics,
  .mobile-panel {
    border: 0.0625rem solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .trt-nav-refract,
  .trt-nav-tint,
  .trt-nav-specular { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trt-nav-specular { transform: none; transition: none; }
}

@media print {
  .trt-masthead { display: none !important; }
}