/* ==========================================================================
   HOVER-RAIL + PIN — menu-optie (Tweak "Menu" → "Hover-rail + overlay").
   • Default: vol hoofdmenu zichtbaar (niet gepind).
   • Hoofdmenu-pin (📌): vastgepind → blijft staan (in-flow, duwt content);
     niet gepind → bij mouse-out terug naar rail, bij hover vol (overlay).
   • Submenu heeft een eigen pin. Gepind submenu = in-flow (duwt content,
     ernaast); niet gepind = hover-overlay.
   • Hoofd en sub onafhankelijk pinbaar.
   Inner-uiterlijk (rail vs vol) hergebruikt .dd-railnav-mini (JS-getoggled).
   ========================================================================== */

body.dd-hoverrail {
  --rail-w: 66px;
  --full-w: 232px;
  --drawer-w: 240px;
  /* Het paneel start iets lager dan helemaal bovenin, ~ter hoogte waar de
     hoofditems beginnen (onder logo + zoekveld) — oogt rustiger en dekt de
     bovenbalk niet af. */
  --hr-panel-top: 64px;
}

/* ── Grid-footprint (push) hangt af van de pins ───────────────────────── */
body.dd-hoverrail .dd-app { grid-template-columns: var(--rail-w) minmax(0, 1fr); transition: none; }
body.dd-hoverrail.hr-main-pinned .dd-app { grid-template-columns: var(--full-w) minmax(0, 1fr); }
body.dd-hoverrail.hr-sub-pinned .dd-app { grid-template-columns: var(--rail-w) var(--drawer-w) minmax(0, 1fr); }
body.dd-hoverrail.hr-main-pinned.hr-sub-pinned .dd-app { grid-template-columns: var(--full-w) var(--drawer-w) minmax(0, 1fr); }
body.dd-hoverrail .dd-main { grid-column: 2; }
body.dd-hoverrail.hr-sub-pinned .dd-main { grid-column: 3; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
/* Niet gepind: vaste rail, verbreedt bij hover als overlay (geen push). */
body.dd-hoverrail:not(.hr-main-pinned) .dd-sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: var(--rail-w);
  z-index: 61;
  overflow: hidden;
  transition: width .18s cubic-bezier(.4, 0, .2, 1);
}
body.dd-hoverrail:not(.hr-main-pinned).dd-hoverrail-expanded .dd-sidebar {
  width: var(--full-w);
  box-shadow: 16px 0 38px rgba(20, 14, 35, .20);
}
/* Gepind: in-flow vol menu (duwt content). */
body.dd-hoverrail.hr-main-pinned .dd-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: auto;
  overflow: hidden;
}
/* Nav scrollt intern → de pin-knop (absolute) blijft bovenin staan. */
body.dd-hoverrail .dd-sidebar { display: flex; flex-direction: column; }
body.dd-hoverrail .dd-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* Geen klik-toggle in deze modus. */
body.dd-hoverrail .dd-railnav-toggle { display: none; }

/* ── Paneel (drawer) ──────────────────────────────────────────────────── */
/* Niet gepind: overlay als zwevende kaart, start iets lager (uitgelijnd met de
   hoofditems), content-hoogte i.p.v. volle hoogte. */
body.dd-hoverrail:not(.hr-sub-pinned) .dd-railnav-drawer {
  position: fixed;
  /* 8px naar links zodat het zwevende paneel net iets over de rechterrand van
     het menu valt (overlap) i.p.v. er strak tegenaan — blijft rechts van de ">".
     Ingeklapte rail (smal) → paneel naast de 66px-rail; gepind/vol → naast het volle menu. */
  top: var(--hr-panel-top); left: calc(var(--rail-w) - 8px);
  height: auto;
  max-height: calc(100vh - var(--hr-panel-top) - 20px);
  width: var(--drawer-w);
  z-index: 60;
  display: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 18px 0 40px rgba(20, 14, 35, .22);
}
body.dd-hoverrail:not(.hr-sub-pinned).dd-hoverrail-panel .dd-railnav-drawer { display: flex; }
/* Gepind/uitgeklapt hoofdmenu (vol): paneel start naast het volle menu i.p.v. de rail. */
body.dd-hoverrail.hr-main-pinned:not(.hr-sub-pinned) .dd-railnav-drawer,
body.dd-hoverrail.dd-hoverrail-expanded:not(.hr-sub-pinned) .dd-railnav-drawer { left: calc(var(--full-w) - 8px); }
/* Gepind: in-flow (duwt content, ernaast); content start op dezelfde hoogte. */
body.dd-hoverrail.hr-sub-pinned .dd-railnav-drawer {
  position: sticky;
  top: 0; left: auto;
  height: 100vh;
  width: var(--drawer-w);
  grid-column: 2;
  display: flex;
  padding-top: var(--hr-panel-top);
  box-shadow: none;
  border-right: 1px solid rgba(255, 255, 255, .14);
}

/* Geen logo in het paneel (zou dubbel zijn naast het uitgeklapte menu). */
body.dd-hoverrail .dd-railnav-drawer-head { display: none; }

/* ── Pin-knoppen ──────────────────────────────────────────────────────── */
.hr-pin { display: none; }
body.dd-hoverrail .hr-pin {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; background: transparent;
  border-radius: 7px; cursor: pointer;
  color: rgba(255, 255, 255, .55);
  transition: background .12s ease, color .12s ease;
}
body.dd-hoverrail .hr-pin:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.dd-hoverrail .hr-pin.is-pinned { color: #fff; }
body.dd-hoverrail .hr-pin i { font-size: 17px; }

/* Hoofdmenu-pin: rechtsboven in de sidebar, op dezelfde plek als de submenu-pin
   (top-right van de kolom). Truc: het brede logo wordt smaller gemaakt zodat de
   pin er NAAST past i.p.v. eroverheen. */
body.dd-hoverrail .hr-pin-main { position: absolute; top: 11px; right: 14px; z-index: 3; }
body.dd-hoverrail.dd-railnav-mini .hr-pin-main { display: none; }
/* Logo inkorten zodat de pin niet over het logo valt. */
body.dd-hoverrail .dd-sidebar .dd-brand-logo { max-width: 150px; }

/* ── Uitklap-knop in de ingeklapte rail (onder het logo) ──────────────────
   Logo = home; dit knopje = hoofdmenu uitklappen/vastpinnen. Absoluut
   gepositioneerd in de (gereserveerde) zoekbalk-ruimte zodat de nav-iconen
   exact op hun plek blijven. Alleen zichtbaar in de smalle rail. */
body.dd-hoverrail .hr-rail-expand { display: none; }
body.dd-hoverrail.dd-railnav-mini .hr-rail-expand {
  display: grid; place-items: center;
  position: absolute;
  top: 56px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 32px;
  border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .82);
  cursor: pointer; z-index: 3;
  transition: background .12s ease, color .12s ease;
}
body.dd-hoverrail.dd-railnav-mini .hr-rail-expand:hover { background: rgba(255, 255, 255, .16); color: #fff; }
body.dd-hoverrail.dd-railnav-mini .hr-rail-expand i { font-size: 17px; }

/* Footer-popovers (Support + profiel) in de smalle rail: vlieg naar rechts uit
   i.p.v. omhoog binnen de 66px-rail (daar werden ze geklemd/geclipt). position:
   fixed ontsnapt aan de overflow:hidden van de rail; aangelijnd onderaan, net
   rechts van de rail. */
body.dd-hoverrail.dd-railnav-mini .dd-foot-pop-panel,
body.dd-hoverrail.dd-railnav-mini .dd-profile-pop {
  position: fixed;
  left: calc(var(--rail-w) + 4px);
  right: auto; top: auto;
  bottom: 14px;
  width: 252px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  z-index: 80;
}

/* Submenu-pin: absoluut in de rechterbovenhoek van het paneel zodat de sectie
   géén lege verticale ruimte reserveert — het eerste item begint bovenaan.
   (Titel is weggelaten; het gehoverde icoon zegt al welk menu het is.) */
body.dd-hoverrail .dd-railnav-drawer-section {
  position: absolute;
  top: 8px; right: 8px;
  width: auto; padding: 0;
  z-index: 4;
}
body.dd-hoverrail .dd-railnav-drawer-title { display: none; }
/* Eerste item iets ademruimte geven zodat het niet pal tegen de bovenrand plakt. */
body.dd-hoverrail .dd-railnav-drawer-body { padding-top: 14px; }

/* ── Iconen op hun plek + zelfde grootte bij vol ⇄ rail ────────────────────
   Overrulet de generieke mini-styling (die centreert + vergroot naar 21px).
   Zo blijven de iconen links op dezelfde x en 16px; alleen labels verschijnen. */
body.dd-hoverrail.dd-railnav-mini .dd-sidebar { padding: 12px 10px 10px; align-items: stretch; }
body.dd-hoverrail.dd-railnav-mini .dd-nav { align-items: stretch; }
body.dd-hoverrail.dd-railnav-mini .dd-nav-item.is-parent {
  justify-content: flex-start;
  width: auto; height: auto;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: var(--dd-radius-sm, 8px);
}
body.dd-hoverrail.dd-railnav-mini .dd-nav-item > i:first-child { font-size: 20px; }
body.dd-hoverrail.dd-railnav-mini .dd-nav-item-foot {
  justify-content: flex-start;
  width: auto; height: auto;
  padding: 7px 10px;
  margin: 1px 0;
}
body.dd-hoverrail.dd-railnav-mini .dd-railnav-home {
  width: auto; height: auto;
  padding: 7px 10px; margin: 1px 0;
  place-items: center start;
}
body.dd-hoverrail.dd-railnav-mini .dd-railnav-home i { font-size: 20px; }

/* Verticale positie van de nav-iconen GELIJK houden bij vol ⇄ rail: de ruimte
   boven de nav (logo + zoekveld) mag niet inklappen, anders schieten de iconen
   omhoog. We houden de logo- en zoekveld-CONTAINERS op dezelfde hoogte (ruimte
   blijft behouden), maar verbergen hun inhoud in de rail zodat alleen lege
   ruimte resteert — logo en zoekbalk zijn dan niet zichtbaar. */
body.dd-hoverrail.dd-railnav-mini .dd-railnav-home { display: none; }
body.dd-hoverrail.dd-railnav-mini .dd-brand { display: flex; visibility: hidden; position: relative; } /* ruimte blijft, wordmark verborgen */
body.dd-hoverrail.dd-railnav-mini .dd-nav-search { display: flex; visibility: hidden; } /* ruimte blijft, zoekbalk verborgen */
/* In de rail: toon het RP-beeldmerk gecentreerd in de gereserveerde logo-ruimte.
   Absoluut gepositioneerd, zodat de nav-iconen exact op hun huidige plek blijven. */
body.dd-hoverrail.dd-railnav-mini .dd-brand .dd-brand-mark-img {
  display: block;
  visibility: visible;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 26px; width: auto;
  filter: brightness(0) invert(1);
}

/* ── Gepind submenu + niet-gepind hoofdmenu ────────────────────────────────
   Als het hoofdmenu (over)uitvouwt bij hover, schuift het gepinde paneel mee
   naar rechts zodat het niet achter het menu wegvalt (content blijft staan). */
body.dd-hoverrail.hr-sub-pinned:not(.hr-main-pinned) .dd-railnav-drawer {
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
  z-index: 55;
}
body.dd-hoverrail.hr-sub-pinned:not(.hr-main-pinned).dd-hoverrail-expanded .dd-railnav-drawer {
  transform: translateX(calc(var(--full-w) - var(--rail-w)));
  box-shadow: 18px 0 40px rgba(20, 14, 35, .22);
}

/* ── Smalle viewports: hoofdmenu wordt een off-canvas drawer ──────────────
   De hover-rail reserveert normaal een menukolom; op mobiel mag dat niet
   (anders blijft er een lege balk staan waar het menu stond). We collapsen
   de grid naar één kolom en maken de sidebar een off-canvas drawer die de
   hamburger (.dd-sidebar-open) in-/uitschuift. !important overrulet alle
   pin-varianten (hr-main-pinned / hr-sub-pinned) die anders specifieker zijn. */
@media (max-width: 960px) {
  body.dd-hoverrail .dd-app { grid-template-columns: 1fr !important; }
  body.dd-hoverrail .dd-main { grid-column: 1 !important; }
  body.dd-hoverrail .dd-railnav-drawer { display: none !important; }

  body.dd-hoverrail .dd-sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: min(84vw, 280px) !important;
    height: 100vh !important;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 200;
    overflow-y: auto;
  }
  body.dd-sidebar-open.dd-hoverrail .dd-sidebar {
    transform: translateX(0);
    box-shadow: 0 10px 32px rgba(20, 14, 35, .28);
  }

  /* Altijd het volledige menu in de drawer — nooit de smalle rail-staat. */
  body.dd-hoverrail.dd-railnav-mini .dd-brand,
  body.dd-hoverrail.dd-railnav-mini .dd-nav-search { visibility: visible !important; }
  body.dd-hoverrail.dd-railnav-mini .dd-brand .dd-brand-mark-img { display: none !important; }
  body.dd-hoverrail.dd-railnav-mini .dd-brand .dd-brand-logo { display: block !important; }

  /* Vastpinnen heeft geen zin op mobiel (menu is een drawer) → verbergen. */
  body.dd-hoverrail .hr-pin,
  body.dd-hoverrail .hr-pin-main,
  body.dd-hoverrail .hr-pin-sub { display: none !important; }

  /* In de drawer is er geen fly-out/paneel; toon het submenu inline (accordion)
     zodra de groep open is. Overrulet 'body.dd-railnav .dd-sidebar .dd-nav-sub
     { display:none }', dat subs normaal naar het paneel verschuift. */
  body.dd-railnav .dd-sidebar .dd-nav-group[open] > .dd-nav-sub { display: flex !important; }
}