/* Figma 2001:124 — hamburger links · logo 1 regel rechts · taal in het menu */

.chrome {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--chrome-h, 65px);
  min-height: var(--chrome-h, 65px);
  padding-left: var(--chrome-pad-x, 32px);
  padding-right: var(--chrome-pad-x, 32px);
  box-sizing: border-box;
  background: var(--bg, #f6f2ea);
  gap: 16px;
}

.chrome__start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 2;
}

.chrome__end {
  display: none !important;
}

/* Logo: 1 regel, rechts, Neutra Bold, #2A2620 */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  max-width: none;
  color: var(--ink, #2a2620);
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  z-index: 2;
}

.logo-mono,
.logo-saw {
  display: none !important;
}

.logo > .logo-text {
  position: static;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  clip: unset;
  clip-path: none;
  white-space: nowrap;
  color: var(--ink, #2a2620);
  text-align: right;
  font-family: var(--font-logo, "NeutraText", "Neutra Text", sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Hoogte en uitlijning staan hieronder, met !important, zodat landing.css
     de Nederlandse 14px-regel niet meer kan laten winnen. */
}

/*
 * Woordmerk = de tekst ROELAND INTERIEUR, één regel.
 * Hamburger-inkt: strepen op y 2 en 15, dikte 2.75 (inkt 0.625..16.375), viewBox 17 hoog,
 * knop 25px → inkt (15.75 × 25 / 17) = 23.16px.
 * Neutra Bold Alt: platte hoofdletter = 680/1000 van de font-size.
 * font-size zo kiezen dat die letters precies 23.16px inkt zijn.
 * Onder een smal scherm deelt 10.5em (breedte van het NL-woord) de vrije ruimte,
 * zodat de regel één regel blijft en nog steeds zo hoog mogelijk is.
 * !important: fonts.css zet small-caps op .logo-text, landing.css en project.css
 * zetten daarna een kleinere font-size. Die mogen het woordmerk niet krimpen.
 *
 * Verticaal centreren (design-20261023): de oude vaste nudge van 5px is weg
 * (die zette de kapitalen ~5.7px onder het midden op Windows).
 * text-box: trim-both cap alphabetic snijdt de regelbox bij tot cap-hoogte..basislijn,
 * zodat flex align-items:center de hoofdletters zelf centreert, los van de
 * platform-metrics (Windows win 964/240 vs macOS hhea 700/200 schelen ~3px).
 * Restcorrectie -0.01em is font-gebonden, geen gok: OS/2 sCapHeight = 700,
 * de getekende platte kapitalen (H E R D L) lopen 0..680 units. De getrimde box is
 * dus 20 units te hoog aan de bovenkant; -10 units zet de inkt exact op het midden.
 */
html[lang] .chrome .logo > .logo-text {
  --logo-ink-nudge: -0.01em;
  text-box: trim-both cap alphabetic;
  font-family: "NeutraText Logo", "NeutraText", "Neutra Text", sans-serif !important;
  font-weight: 700 !important;
  font-size: min(calc((15.75 * 25px / 17) * 1000 / 680), calc((100vw - 104px) / 10.5)) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  font-variant-caps: normal !important;
  -webkit-font-feature-settings: normal !important;
  font-feature-settings: normal !important;
  font-synthesis: none !important;
  display: block !important;
  transform: translateY(var(--logo-ink-nudge)) !important;
}
/* Zonder text-box (Firefox): regelbox = 1em, metrics Windows (win 964/240, geen
   USE_TYPO_METRICS): kapitaalmidden ligt (964 - 240 - 680) / 2 = 22 units onder het boxmidden. */
@supports not (text-box: trim-both cap alphabetic) {
  html[lang] .chrome .logo > .logo-text {
    --logo-ink-nudge: -0.022em;
  }
}

/* Figma: één regel “roeland interior” — l2 verbergen in chrome */
.logo-text__l1 {
  display: inline;
  color: inherit;
}
.logo-text__l2 {
  display: none !important;
}

.chrome-icon {
  background: transparent;
  border-color: transparent;
  color: var(--ink, #2a2620);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Figma hamburger 20×17 — even hoog als logo (25px), ratio behouden */
.menu-toggle.chrome-icon {
  --logo-h: 25px;
  width: calc(var(--logo-h) * 20 / 17);
  height: var(--logo-h);
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  border: 0 !important;
  /* nooit een vlak achter de strepen/het kruis (project.css :hover/:active zette er een) */
  background: transparent !important;
  opacity: 1;
  padding: 0;
}
.menu-toggle .menu-toggle__svg,
.menu-toggle .chrome-icon__svg {
  width: 100%;
  height: 100%; /* hoogte blijft = logo (25px); dikte via stroke, niet box */
  display: block;
  overflow: visible;
  color: var(--ink, #2a2620);
}
/*
 * Hamburger ↔ kruis (design-20261023). Eén bron voor alle pagina's.
 * Statisch dik (2.75 user units ≈ 4px, ≈ stamdikte van het Neutra-logo),
 * hover dunner (1.375 ≈ 2px), ook in open stand.
 * Open: buitenste strepen schuiven naar het midden (y 8.5), daarna draaien ze ±45°
 * om hun eigen middelpunt (transform-box: fill-box). Middenstreep vervaagt + krimpt.
 * Sluiten = exact omgekeerd: eerst terugdraaien, dan uit elkaar.
 * Losse translate/rotate/scale-properties zodat beide fasen elk hun eigen delay hebben.
 * Kruispunt = (10, 8.5) = midden van de viewBox 20×17 → gecentreerd in dezelfde box.
 * Staat volgt aria-expanded (JS zet die op elke pagina).
 */
.menu-toggle {
  --burger-w: 2.75px;
  --burger-w-hover: 1.375px;
  --burger-seg: 240ms;   /* duur per fase */
  --burger-gap: 140ms;   /* start fase 2 → totaal 380ms */
  --burger-shift: 6.5px; /* 8.5 - 2 = 15 - 8.5 */
}
.menu-toggle .menu-toggle__bar {
  stroke: currentColor;
  stroke-width: var(--burger-w);
  stroke-linecap: butt;
  transform-box: fill-box;
  transform-origin: center;
  translate: 0 0;
  rotate: 0deg;
  scale: 1 1;
  opacity: 1;
  /* sluiten: eerst rotatie terug, dan translate; midden komt terug in fase 2 */
  transition:
    rotate var(--burger-seg) var(--ease-ae) 0ms,
    translate var(--burger-seg) var(--ease-ae) var(--burger-gap),
    scale var(--burger-seg) var(--ease-ae) var(--burger-gap),
    opacity var(--burger-seg) var(--ease-ae) var(--burger-gap),
    stroke-width 320ms var(--ease-ae) 0ms,
    transform 200ms var(--ease-ae) 0ms;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
  /* openen: eerst translate naar het midden, dan rotatie; midden verdwijnt in fase 1 */
  transition:
    translate var(--burger-seg) var(--ease-ae) 0ms,
    rotate var(--burger-seg) var(--ease-ae) var(--burger-gap),
    scale var(--burger-seg) var(--ease-ae) 0ms,
    opacity var(--burger-seg) var(--ease-ae) 0ms,
    stroke-width 320ms var(--ease-ae) 0ms,
    transform 200ms var(--ease-ae) 0ms;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar--1 {
  translate: 0 var(--burger-shift);
  rotate: 45deg;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar--2 {
  opacity: 0;
  scale: 0.2 1;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar--3 {
  translate: 0 calc(var(--burger-shift) * -1);
  rotate: -45deg;
}
/* Hover: strepen (en kruis) worden dunner */
.menu-toggle:hover:not(:disabled) .menu-toggle__bar,
.menu-toggle:focus-visible .menu-toggle__bar {
  stroke-width: var(--burger-w-hover);
}
/* Press (alleen dicht): stapel iets dichter, geanimeerd */
.menu-toggle[aria-expanded="false"]:active .menu-toggle__bar--1,
.menu-toggle[aria-expanded="false"].is-press .menu-toggle__bar--1 {
  transform: translateY(0.75px);
}
.menu-toggle[aria-expanded="false"]:active .menu-toggle__bar--3,
.menu-toggle[aria-expanded="false"].is-press .menu-toggle__bar--3 {
  transform: translateY(-0.75px);
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .menu-toggle__bar,
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Taalknop: cirkel, gecentreerd tussen onderkant balk en het eerste menu-item. */
.nav-sidebar {
  padding-top: var(--chrome-h, 65px) !important;
  justify-content: flex-start !important;
}
.nav-sidebar__above,
.nav-sidebar__below {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.nav-sidebar > .nav-sidebar__nav {
  flex: 0 0 auto !important;
  width: 100%;
}
.nav-sidebar .lang-btn.nav-sidebar__lang {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid color-mix(in srgb, var(--ink, #2a2620) 22%, transparent) !important;
  background: color-mix(in srgb, var(--bg, #f6f2ea) 88%, transparent) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--font-ui, "Neutra Text", system-ui, sans-serif) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
  text-transform: uppercase;
  color: var(--ink, #2a2620);
  cursor: pointer;
  opacity: 1;
  transform: none;
}
.nav-sidebar .lang-btn.nav-sidebar__lang:hover,
.nav-sidebar .lang-btn.nav-sidebar__lang:focus-visible {
  color: var(--accent, #b4863a);
  border-color: var(--accent, #b4863a) !important;
}
.nav-sidebar__lang .lang-btn__label {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  margin-inline-end: -0.08em;
  transform: translateY(0.5px);
}

.nav-sidebar__tools {
  display: none !important;
}

.page-loader {
  color: var(--ink, #2a2620);
}

.featured,
.work,
.site-footer {
  padding-left: var(--page-pad-x, 28px);
  padding-right: var(--page-pad-x, 28px);
  box-sizing: border-box;
  background: var(--bg);
  position: relative;
  z-index: 2;
}

/* Portfolio fullscreen. Dubbele class wint van .chrome-icon in landing.css (die laadt later). */
.portfolio-fs-close.chrome-icon {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: var(--chrome-pad-x, 28px);
  z-index: 120;
  display: none;
}
body.is-portfolio-fs .portfolio-fs-close {
  display: grid;
  place-items: center;
}
body.is-portfolio-fs .chrome,
body.is-portfolio-fs .nav-sidebar,
body.is-portfolio-fs .nav-sidebar__scrim,
body.is-portfolio-fs .hero,
body.is-portfolio-fs .featured,
body.is-portfolio-fs .site-footer,
body.is-portfolio-fs #page-loader {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.is-portfolio-fs #work {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: auto;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: calc(72px + env(safe-area-inset-top, 0px)) var(--page-pad-x, 28px) 48px;
  background: var(--bg);
  box-sizing: border-box;
}
body.is-portfolio-fs {
  overflow: hidden;
}
body:not(.is-nav-open) .nav-sidebar {
  visibility: hidden;
  pointer-events: none;
}

.site-version {
  margin: 22px 0 4px;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #8a8175;
}

main.archive ~ .site-version {
  margin: 28px var(--page-pad-x, 28px) 24px;
}