/* ============================================================
   GXJ Events — cross-section runtime concerns
   (nav scroll state + inline editor UI)
   ============================================================ */

/* ---- Nav scroll state (header built in 00-nav.html) ---- */
#sec-nav { transition: background .3s var(--ease), backdrop-filter .3s var(--ease), padding .3s var(--ease); }
#sec-nav.scrolled { background: rgba(16,16,16,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* =================== THEME ANIMATION SUPPORT =================== */
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* Masked-line wrapper created by SplitText (mask:"lines") */
.gxj-line { will-change: transform; }

/* Card hover lift (composes with GSAP media zoom) */
.work-card, .precision__card, .tcard, .testi__card {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover, .precision__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
/* media tiles clip their parallax/zoom overflow */
.work-img, .precision__photo { overflow: hidden; }

/* Button arrow nudge on hover (rekolet icon slide) */
.btn { overflow: hidden; }
.btn .btn__icon svg { transition: transform .35s var(--ease); }
.btn:hover .btn__icon svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .work-card, .precision__card, .tcard, .testi__card,
  .btn .btn__icon svg { transition: none; }
}

/* =================== INLINE EDITOR =================== */
.ed-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9999;
  width: 54px; height: 54px; border-radius: var(--r-round);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brown); color: var(--c-text-white);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.ed-fab:hover { transform: translateY(-2px) scale(1.04); }
.ed-fab svg { width: 24px; height: 24px; }
body.edit-mode .ed-fab { background: #1f8a4c; }

.ed-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  z-index: 9999; display: flex; gap: 8px; align-items: center;
  padding: 8px; border-radius: 14px;
  background: rgba(16,16,16,0.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transition: transform .3s var(--ease), opacity .3s var(--ease); opacity: 0;
  font-family: var(--font-body);
}
body.edit-mode .ed-bar { transform: translateX(-50%) translateY(0); opacity: 1; }
.ed-bar__label { color: #9fe7bd; font-size: 13px; font-weight: 700; padding: 0 8px; white-space: nowrap; }
.ed-btn {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: var(--c-text-white); font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 9px; white-space: nowrap;
  transition: background .2s var(--ease);
}
.ed-btn:hover { background: rgba(255,255,255,.14); }
.ed-btn--exit { background: var(--c-brown); }

/* highlight editable elements while editing */
body.edit-mode [data-edit] { outline: 1.5px dashed rgba(120,200,160,.7); outline-offset: 3px; border-radius: 3px; transition: outline-color .2s; }
body.edit-mode [data-edit="text"] { cursor: text; }
body.edit-mode [data-edit="text"]:focus { outline: 2px solid #2bd47e; background: rgba(43,212,126,.10); }
body.edit-mode [data-edit="image"], body.edit-mode [data-edit="bg"] { cursor: pointer; position: relative; }
body.edit-mode [data-edit="image"]:hover, body.edit-mode [data-edit="bg"]:hover { outline-color: #2bd47e; }
/* badge on editable media */
body.edit-mode [data-edit="image"]::after,
body.edit-mode [data-edit="bg"]::after {
  content: "↻ replace"; position: absolute; top: 6px; left: 6px;
  font: 600 11px/1 var(--font-body); color: #fff; background: rgba(0,0,0,.7);
  padding: 4px 7px; border-radius: 6px; pointer-events: none;
}
/* in edit mode, neutralize link navigation feel */
body.edit-mode a { pointer-events: auto; }

/* SVG colour picker popover */
.ed-svgpop {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px;
  background: rgba(16,16,16,0.96); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 50px rgba(0,0,0,.55);
  font-family: var(--font-body);
}
.ed-svgpop__t { color: #fff; font-size: 13px; font-weight: 700; }
.ed-svgpop__row { display: flex; gap: 8px; flex-wrap: wrap; max-width: 260px; }
.ed-swatch {
  width: 30px; height: 30px; border-radius: 8px; padding: 0;
  border: 2px solid rgba(255,255,255,.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; line-height: 1;
}
.ed-swatch--orig { background: rgba(255,255,255,.08); }
.ed-swatch.is-sel { border-color: #2bd47e; box-shadow: 0 0 0 2px rgba(43,212,126,.4); }
.ed-svgpop__done { align-self: flex-end; }

/* Access-code modal (custom, so it works inside embedded webviews where
   native prompt()/alert() can be blocked) */
.ed-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); font-family: var(--font-body); }
.ed-modal__box { width: min(92vw, 320px); display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px; background: rgba(20,20,20,.98); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.ed-modal__title { color: #fff; font-size: 15px; font-weight: 700; }
.ed-modal__input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; letter-spacing: .2em; text-align: center; }
.ed-modal__input:focus { outline: 2px solid #2bd47e; }
.ed-modal__msg { min-height: 16px; color: #ff8f8f; font-size: 12.5px; }
.ed-modal__row { display: flex; justify-content: flex-end; gap: 8px; }

@media print { .ed-fab, .ed-bar, .ed-svgpop, .ed-modal { display: none !important; } }

/* mobiel: lange NL-woorden in de display-kop ("Merkevenementen") passend maken */
@media (max-width: 479px) {
  #sec-hero h1.hero__title { font-size: min(9vw, 40px) !important; }
}